在使用 *ngFor 遍历时需要从 Angular 中的 Array 过滤一些数据

Question

我有一个包含一些对象元素的数组。我想从下面的数组中获取第一个具有“mandatory: false”的对象和第一个具有“mandatory: true”的元素。

我需要从下面的列表中获取 UI 中的州和城市。

countryDetailsArray: Array(5)
0: {id: 278, name: "State", mandatory: false}
1: {id: 281, name: "Zone", mandatory: false}
2: {id: 284, name: "City", mandatory: true}
3: {id: 272, name: "Building", mandatory: true}
4: {id: 292, name: "Street", mandatory: true}

<div *ngFor="let countryData of countryDetailsArray;">
    <div>
        <button>
            {{countryData.name}}
        </button>
    </div>
</div>

Answer 1

我不会尝试在 HTML 中这样做，最好在 .ts 文件中将其作为函数 returns 一个包含您想要的两个元素的新数组.该函数看起来像这样：

countryDetailsArray = [
{id: 278, name: "State", mandatory: false},
{id: 281, name: "Zone", mandatory: false},
{id: 284, name: "City", mandatory: true},
{id: 272, name: "Building", mandatory: true},
{id: 292, name: "Street", mandatory: true},
]

getFirstOfEach() {
  let array = []
  array.push(this.countryDetailsArray.find(item => item.mandatory === false));
  array.push(this.countryDetailsArray.find(item => item.mandatory === true));
  return array
}

在使用 *ngFor 遍历时需要从 Angular 中的 Array 过滤一些数据

Need to filter some data from Array in Angular while traversing with *ngFor

angular

ngfor

angular-ng-if