在字符串 Angular/Typescript 中显示一些值答案

【问题标题】：Display some values in string Angular/Typescript在字符串 Angular/Typescript 中显示一些值
【发布时间】：2022-01-27 22:45:11
【问题描述】：

我有这样的 json 格式。如何在 Angular/TypeScript 中显示没有“全部”一词的爱好？

 {
    "Name": "Mustermann1",
    "Vorname": "Max1",
    "maennlich": true,
    "Hobbys": ["Reiten", "Golfen", "Lesen", "all"],
    "Alter": 42,
    "Kinder": [],
    "Partner": null
 }
 {
    "Name": "Mustermann2",
    "Vorname": "Max2",
    "maennlich": true,
    "Hobbys": ["Reiten", "Golfen", "Lesen"],
    "Alter": 42,
    "Kinder": [],
    "Partner": null
 }
 {
    "Name": "Mustermann3",
    "Vorname": "Max3",
    "maennlich": true,
    "Hobbys": ["Reiten", "Lesen", "all"],
    "Alter": 42,
    "Kinder": [],
    "Partner": null
  }

【问题讨论】：

你想把它添加到你的模板吗？
@MirentafazAli：我想显示所有带有爱好的名称，其中包括 HTML 中的爱好“Reiten”或“Golfen”或“Lesen”（没有“All”）

标签： html angular typescript

【解决方案1】：

您可以在 HTML 中使用两个 *ngFor 循环和一个 *ngIf 来实现，前提是您有来自组件的数据。 这可能不是理想的方法。

你循环显示每个人和每个爱好，并过滤掉任何爱好 'all'。

<ng-container *ngIf="hobby !== 'all'">
    {{ hobby }}
</ng-container>

快速设置：

<ng-container *ngFor="let person of dataObject">
  <ul>
    <li>
      <h3>Name: {{ person.Vorname }}</h3>
      <ng-container *ngFor="let hobby of person.Hobbys">
        <ng-container *ngIf="hobby !== 'all'">
          {{ hobby }}
        </ng-container>
      </ng-container>
    </li>
  </ul>
</ng-container>

And a working StackBlitz 验证您的需求。

【讨论】：

【解决方案2】：

data = data.map((val) => {
      val.Hobbys = val.Hobbys.filter((x) => x !== 'all');
      return val;
    });

【讨论】：

【解决方案3】：

<ng-container *ngFor="let item of items">
  <ng-container *ngIf="item.Hobbys.indexOf('all') < 0">
    <ul>
      <li>
        {{ item.Name }}
      </li>
    </ul>
  </ng-container>
</ng-container>

stackblitz code link

【讨论】：