如何在对象数组中显示特定对象（Angular 5，TypeScript）

Question

我在 Angular 5 中有一个数据提供者。

export class DataProvider {
  location: any;

  private locations: any[] = [
    {
      "name": "restaurant",
      "location": "downtown",
      "category": "restaurant",
      "id": "1"
    },

    {
      "name": "law firm",
      "location": "center city",
      "category": "office",
      "id": "2"
    },

    {
      "name": "public library",
      "location": "suburb",
      "category": "library",
      "id": "3"
    } ]

这是我的 HTML 文件。

<div *ngFor="let location of locations">
   <h1></h1>
    <h2></h2>
</div>

在这种情况下，如何在具有某些属性的数据数组中加载特定对象（项）？ 例如，如果我想用"category" :"restaurant" 加载一个对象，我应该如何处理我的 HTML 文件？所以另外两个不应该出现。我只想通过使用这个特定的属性来加载三分之一。

谢谢。

Answer 1

您需要访问该属性。您可以使用以下示例

<div *ngFor="let location of locations">
   <h1>{{location.name}}</h1>
    <h2>{{location.category}}</h2>
</div>

编辑

根据类别进行过滤：

locationsFiltered = this.locations.filter(location =>location.category=="restaurant");

现在为了让这个例子更实用，我将创建一个方法来实现它

filter(category : string) : any[] {
   return this.locations.filter(location =>location.category==category);
}

然后在html中

<div *ngFor="let location of locationsFiltered">
   <h1>{{location.name}}</h1>
    <h2>{{location.category}}</h2>
</div>