Display some values in string Angular/Typescript-CodePudding

I have json format like that. How can I display hobbies without the word "all" in 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
  }

CodePudding user response：

You can do it with two *ngFor loops and one *ngIf in your HTML, given that you have the data coming from your component. It might not be the ideal way to do it.

You loop through each person and each hobby to show, and filter out any hobby that is 'all'.

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

A quick setup:

<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>

Result of StackBlitz

stackblitz code link