每次將新對象推入數組時，我的循環都會在模板中重復出現。 我怎么能在模板中處理這個？

Question

我想在將新對象添加到現有陣列時打印汽車列表。 循環重復，我再次開始打印。 我怎么能避免這個？

I tried using async pipe and also track by


// in the service
           getVehicles(){
        obj = { data: [{name: 'car 1'},{name: 'car 2'}] }
            return Observable.interval(2200).map(i=> obj.data.push({name: 'car 3'}));
        }


    // in the controller
    vehicles: Observable<Array<any>>
    ngOnInit() {
        this.vehicles = this._vehicleService.getVehicles().obj.data;
    }


// in template
<div *ngFor='let vehicle of vehicles | async'>
    {{vehicle.name}}
</div>

預計車1車2車3車3

但它給了

汽車1汽車2汽車1汽車2汽車3汽車1汽車2汽車3汽車3

Answer 1

我認為這個解決方案非常糟糕。 我希望這是一個練習。 我認為這個問題是這樣的：

  vehicles: Observable<Array<any>>
    getVehicles(){
this.vehicles=[];
obj=null;
        obj = { data: [{name: 'car 1'},{name: 'car 2'}] }
            return Observable.interval(2200).map(i=> obj.data.push({name: 'car 3'}));
        }


    // in the controller

    ngOnInit() {
        this.vehicles = this._vehicleService.getVehicles().obj.data;
    }

Answer 2

視圖中的重復可能是由腳本錯誤（訪問未定義的某些屬性）引起的 - 控制台中是否有紅色的東西？ 很多紅色？

無論如何：要添加汽車，你可以

getVehicles() {
   const obj = { data: [{name: 'car 1'},{name: 'car 2'}] };

   return interval(2200).pipe(
      map(() => {
         const data = [...obj.data, { name: 'car 3' }];
         return Object.assign(obj, { data });
      });
   );
}

閱讀它們：

ngOnInit() {
   this.vehicles = this._vehicleService.getVehicles().pipe(
      map(({ data }) => data)
  );
}