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

每次将新对象推入数组时，模板中的循环就会重复。如何在模板中处理此问题？

2 个答案: