Angular 中 array.push() 的无限循环

Question

我有一个小问题，我不明白为什么...

情况：我有一组当天的所有预订。我想，如果我点击一个按钮 "evening"，只有晚上的预订。

当我单击按钮时，parent 组件中调用了 getEvening() 函数。

在我的 child component.html 中，我有 :

<tbody *ngFor="let resa of resas">
        <tr class="addred" (click)='setResa(resa)'>
            <td *ngIf="!size">{{ resa.confirmResa }}</td>
            <td>{{ resa.arrivee.split(' ')[1] }}</td>
            <td>{{ resa.nom_client }}</td>
            <td *ngIf="!size">{{ resa.nbre_client }}</td>
            <td *ngIf="!size">{{ resa.num_phone_client }}</td>
            <td *ngIf="!size">{{ resa.num_table }}</td>
            <td *ngIf="!size">{{ resa.formule }}</td>
            <td *ngIf="!size" (click)="stopEvent($event)" (mouseover)=setResaId(resa)>

                <input class="venu" type="checkbox" clrToggle (change)="came($event)" [checked]="resa.venu === 1" />
            </td>
        </tr>
    </tbody>

在我的 child component.ts 中，我有 :

export class ReservationTabComponent implements OnInit {


  @Input() date: Subject<string>;

  @Output() resa = new EventEmitter<any>();

  addred: boolean;
  resas: any[] = [];
  resaId: string;

  dateDay: string;
  hour: number;

  scrHeight: number;
  scrWidth: number;

  size: boolean;
  bool: boolean;

  venu: number;

  constructor(
    private datastore: DatastoreService,
    private resaService: ReservationService
  ) { }

  ngOnInit(): void {
    this.getScreenSize();
    this.date.subscribe((date) => {
      this.dateDay = date;
      this.setDate(this.dateDay);
    });
    this.addred = false;
  }

  setDate(date: string) {
    this.datastore.findResaOfTheDay(date)
      .subscribe(
        (resas) => {
          this.resas = resas.data.original;
          console.log(this.resas);
        });
  }



  getAll() {

    this.setDate(this.dateDay);
  }

  getMidi() {
    this.resas = [];
  }

  getEvening() {
    for (let resa of this.resas) {

      this.hour = parseInt(moment().format(resa.arrivee.split(' ')[1]), 10);
      if (this.hour > 13) {
        this.resas.push(resa);  <-- this causing infinite loop...
        console.log(resa);  <-- this works correctly
      }
    }
  }
}

实际上，当我点击按钮时，我有一个使用 push() 方法但不使用 console.log() 方法的无限循环...

我不明白为什么...

Answer 1

您正在将更多元素推送到您正在迭代的同一个列表中，因此每次推送一个元素时，您都会迭代它，然后再次推送它并永远重复。

假设您匹配 B：

 v 
[A,B,C]

   v 
[A,B,C] push B

     v 
[A,B,C,B]

       v 
[A,B,C,B] push B

         v 
[A,B,C,B,B] push B

           v 
[A,B,C,B,B,B] push B

您可能想使用两个不同的数组:)

Angular 中 array.push() 的无限循环

infinite loop with array.push() in Angular

arrays

push

infinite-loop

typescript

angular