从外部循环切换 *ngFor 中的所有局部变量

Question

假设我有一个 *ngFor 循环，我在其中定义了一个局部范围的变量，例如：

<div *ngFor="let item of items">
  <p>{{item.name}}</p>
  <div *ngIf="item.colorVisible">{{item.color}}</div>
  <button (click)="item.colorVisible = !item.colorVisible">Toggle Color</button>
</div>

我正在遍历一个对象数组，所以打字稿中的虚拟数组将是：

export class AppComponent  {
  items = [
    {
      name: 'John',
      color: 'Green'
    },
    {
      name: 'Jim',
      color: 'Blue'
    },
    {
      name: 'Jane',
      color: 'Orange'
    }
  ]
}

如何在循环外部设置一个按钮来切换所有变量，然后更新范围内的变量？

这是一个StackBlitz。

Answer 1

只需向您的组件添加一个布尔值属性并创建一个循环遍历您的项目的方法。

组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public allVisible = false;
  items = [
    {
      name: 'John',
      color: 'Green',
      colorVisible: false
    },
    {
      name: 'Jim',
      color: 'Blue',
      colorVisible: false
    },
    {
      name: 'Jane',
      color: 'Orange',
      colorVisible: false
    }
  ]

  toggleAll() {
    this.allVisible = !this.allVisible;
    this.items.forEach((item) => {
        item.colorVisible = this.allVisible;
    });
  }
}

模板

<button (click)="toggleAll()">Toggle All Colors</button>

我forked your StackBlitz.

从外部循环切换 *ngFor 中的所有局部变量

Toggle all Local Variables in *ngFor From Outside Loop

arrays

typescript

angular-ng-if

ngfor

angular