каждый раз, когда новый объект помещается в массив, мой цикл в шаблоне повторяется.как я могу справиться с этим в шаблоне?

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

Повторения в представлении, вероятно, вызваны ошибками сценария (доступ к некоторому свойству undefined) - в консоли нет ничего красного? A много красного?

В любом случае: добавить машины можно

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

Answer 2

Я думаю, что это решение очень плохое.Я надеюсь, что это упражнение.Я думаю, что проблема заключается в следующем:

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