Angular2视图未更新从共享服务更改的数据

我正在尝试显示来自共享服务的数据，但没有显示。任何人都可以帮助我，我从几天开始就在此工作。我尝试了ngzone和changeTectorRef，但对我不起作用。

home.component.html

<div *ngFor="let order of orders " class="order-cards">
    <div class="order-card">
        <div class="btn-order-card">
            <button type="submit" class="btn btn-success " (click)="viewOrder(order)">View the Order </button>
        </div>
    </div>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { SharedService } from '../services/shared.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  
  constructor( private route: Router, private sharedService: SharedService) { }
  ngOnInit() {
  }
  viewOrder(order) {
    this.route.navigate(['../view-order'])
    this.sharedService.viewOrderValues(order);
  }
  
}

shared.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
Injectable()
export class SharedService {
    constructor() { }
    private viewOrderSource = new Subject<any>();
    viewOrder$ = this.viewOrderSource.asObservable();
    viewOrderValues(data: any) {
        this.viewOrderSource.next(data);
        return data;
    }
}

view-order.component.ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../services/shared.service';
@Component({
  selector: 'app-view-order',
  template: '{{orderValues}}',
  styleUrls: ['./view-order.component.scss']
})
export class ViewOrderComponent implements OnInit {
  orderValues: any;
  constructor(private sharedService: SharedService) {
  }
  ngOnInit() {
    this.sharedService.viewOrder$.subscribe((data) => {
      this.orderValues = data;
    });
  }
}

我认为您的方法是错误的。

您应该使用基于路由的Resolve并将参数作为ID传递给组件，以便在组件已加载加载。

时可以获取数据。

修改了您的shared.service.ts以支持基于ID的搜索：

@Injectable()
export class SharedService {
  private orders = [];  // initialize or fetch from service, IDK
  ordersChanged = new Subject<any[]>();
  constructor() { }
  addOrder(order: any) {
    this.orders.push(order);
    this.ordersChanged.next(this.getOrders());
  }
  getOrders(): any[] {
    return this.orders.slice();
  }
  getOrder(id: number) {
    // your logic to find order
    return this.orders[id];
  }
}

在您的home.component.html中：

<div *ngFor="let order of orders; let i = index" class="order-cards">
    <div class="order-card">
        <div class="btn-order-card">
            <button 
                type="submit"
                class="btn btn-success"
                (click)="viewOrder(i)">View the Order</button>
        </div>
    </div>
</div>

和home.component.ts中的更改：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {
  orders: string[];
  subscription: Subscription;
  constructor(private route: Router, private sharedService: SharedService) { }
  ngOnInit() {
    this.orders = this.sharedService.getOrders();
    this.subscription = this.sharedService.ordersChanged.subscribe(orders => this.orders = orders);
  }
  viewOrder(index: number) {
    this.route.navigate(['/view-order', index])
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

您可以创建OrderResolver服务：

@Injectable()
export class OrderResolver implements Resolve<any>{
    constructor(private sharedService: SharedService) { }
    resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): string | Observable<string> | Promise<string> {
        const id = +route.params['id'];
        return this.sharedService.getOrder(id);
    }
}

您可以轻松地在上面注入Router，并在没有给定ID的顺序时处理情况。

在您的路由模块类中，更改view-order路径以接受参数为ID，并使用解析器在路由加载期间找到订单：

  {
    path: 'view-order/:id',
    component: ViewOrderComponent,
    resolve: { order: OrderResolver }
  }

，然后在您的ViewOrderComponent中：

export class ViewOrderComponent implements OnInit {
  orderValues: any;
  constructor(private route: ActivatedRoute) { }
  ngOnInit() {
    this.orderValues = this.route.snapshot.data['order'];
  }
}

更改

private viewOrderSource = new Subject<any>();

private viewOrderSource = new BehaviorSubject<Object>(null);

in 共享 - seriice.ts

您必须将列表设置为数据副本。除非您将数据重置为完全不同的对象或数组。

您可以使用this.ArrayName = this.ArrayName.slice（）作为数组；或对象var objname = object.assign（{}，objname）

尝试做

this.sharedService.viewOrderValues(order);
this.route.navigate(['../view-order'])

我觉得您首先要导航，因此它没有调用该功能，因此您的观察者没有被调用。

home.component.html引用变量" orders"。此变量在home.component.ts中不存在。当您的服务返回数据时，您可以将其保存为实例变量，并将其引用在HTML中。

编辑：我相信您也可以直接与您的服务可观察到的结合。

相关内容

最新更新

热门标签：