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>

我循环遍历一个对象数组，因此typescript中的虚拟数组将是：

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 From Outside Loop中切换所有局部变量

1 个答案: