angular2视图不更新从共享服务更改的数据

Question

我试图显示来自我的共享服务的数据，但它没有显示。任何人都可以帮助我，我快速的几天结构。我尝试过NgZone和ChangeDetectorRef，但对我不起作用。

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;
    }
}

视图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;
    });
  }
}

Answer 1

我认为你的做法是错误的。

您应该使用routing based Resolve并将param作为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>

和你的qazxsw poi相应的变化：

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);
    }

}

并在没有给定id的顺序时处理该情况。

在路由模块类中，更改Router路径以接受参数作为id并使用解析程序在路由加载期间查找顺序：

view-order

然后在你的

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

：

ViewOrderComponent

Answer 2

更改

export class ViewOrderComponent implements OnInit {
  orderValues: any;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.orderValues = this.route.snapshot.data['order'];
  }
}

至

private viewOrderSource = new Subject<any>(); 

在共享seriice.ts

Answer 3

您必须将列表设置为数据的副本。除非您将数据重置为完全不同的对象或数组，否则角度不会实现其更改。

您可以对数组使用this.arrayName = this.arrayName.slice（）;或者对象var objName = Object.assign（{}，objName）

Answer 4

试着做

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

我觉得你先导航，所以它没有调用那个函数，因此你的观察者没有被调用。

Answer 5

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

编辑：我相信您也可以直接绑定到您的服务中的observable。