Javascript 为循环的每次迭代设置角度为5*nf的布尔值

我已导出Typescript中的以下类：

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循环的每次迭代中，我使用布尔变量在单击时显示/隐藏元素。我想知道如何在每次迭代中单击按钮时切换该变量（使用我的toggleMeasurements（）函数）。当前，单击该按钮会更改整个视图的布尔值，从而切换我的所有元素。如何传递索引并仅在单击按钮的迭代中更新该变量

请参见此处有关StackBlitz的示例…

this.someArray=[…]
显示/隐藏
{{some.someValue}

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

This.someArray=[…]
显示/隐藏
{{some.someValue}

---

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

您可以向每个对象添加属性，并基于该值进行切换

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>

类型{{bin.Type}
子类型{bin.subtype}
状态{bin.Status}
容量{bin.Capacity}

---

您可以向每个对象添加属性，并基于该值进行切换

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>

类型{{bin.Type}
子类型{bin.subtype}
状态{bin.Status}
容量{bin.Capacity}