为循环的每次迭代在 Angular 5 *nfFor 中设置布尔值

Question

我在 Typescript 中导出了以下 class：

export class BinSetupComponent implements OnInit {

    bins = [
            {id: '001', name:'Temper', comment: 'Large Round', type: 'Grain Storage', subtype: 'Screenings', status: 'Active', capacity: '2,000,000'},
            {id: '123', name:'Small Valley', comment: 'Rectangle', type: 'Feed Storage', subtype: 'Mill Mix', status: 'Inactive', capacity: '1,300,000'},
            {id: '493', name:'Hilltop', comment: 'Hexagonal', type: 'WIP Storage', subtype: 'Flour', status: 'Active', capacity: '1,200,000'},
            {id: '004', name:'Large Valley', comment: 'Other', type: 'Loadout', subtype: 'Organic', status: 'Inactive', capacity: '300,000'},
            {id: '982', name:'Temper', comment: 'Large Round', type: 'Grain Storage', subtype: 'Screenings', status: 'Active', capacity: '1,000,000'}
    ];

    editingMeasurements: boolean = false;

    toggleMeasurements(index) {
        this.editingMeasurements = !this.editingMeasurements;
    }

  constructor() {}

  ngOnInit() {
  }

}

我在 ngFor 循环的每次迭代中使用布尔变量 show/hide 单击元素。我想知道如何切换该变量（在每次迭代中单击按钮时使用我的 toggleMeasurements() 函数。当前单击该按钮会更改整个视图的布尔值，因此会切换我的所有元素。我如何传递索引和只为单击按钮的迭代更新该变量？

在此处查看 StackBlitz 上的示例...https://stackblitz.com/edit/angular-stahy5

Answer 1

this.someArray = [...]

<div *ngFor="let some of someArray">
 <a (click)="some.showMe = !some.showMe">Show/hide</a>
 <div [hidden]="!some.showMe">
  {{some.someValue}}
 </div>
</div>

我就是这样做的。您在范围级别设置变量。默认情况下，showMe 将是未定义的，计算结果为 false，因此该元素将被隐藏。

Answer 2

您可以向每个对象添加一个属性并根据该值进行切换

bins = [
        {id: '001', name:'Temper', comment: 'Large Round', type: 'Grain Storage', subtype: 'Screenings', status: 'Active', capacity: '2,000,000', editingMeasurements:false},
        {id: '123', name:'Small Valley', comment: 'Rectangle', type: 'Feed Storage', subtype: 'Mill Mix', status: 'Inactive', capacity: '1,300,000', editingMeasurements:false},
        {id: '493', name:'Hilltop', comment: 'Hexagonal', type: 'WIP Storage', subtype: 'Flour', status: 'Active', capacity: '1,200,000', editingMeasurements:false},
        {id: '004', name:'Large Valley', comment: 'Other', type: 'Loadout', subtype: 'Organic', status: 'Inactive', capacity: '300,000', editingMeasurements:false},
        {id: '982', name:'Temper', comment: 'Large Round', type: 'Grain Storage', subtype: 'Screenings', status: 'Active', capacity: '1,000,000', editingMeasurements:false}
];

HTML 会变成

<ul *ngIf="!bin.editingMeasurements">
                    <li><span>Type</span>{{ bin.type }}</li>
                    <li><span>Sub-Type</span>{{ bin.subtype }}</li>
                    <div class="clearfix"></div>
                    <li><span>Status</span>{{ bin.status }}</li>
                    <li><span>Capacity</span>{{ bin.capacity }}</li>
                </ul>

Updated Stackblitz

为循环的每次迭代在 Angular 5 *nfFor 中设置布尔值

Set boolean in Angular 5 *nfFor for each iteration of the loop

javascript

loops

typescript

ngfor

angular