Как изменить данные, сопоставив значение в Angular 8

Question

Я пытаюсь изменить элементы галереи, сопоставив значение, по умолчанию Я хочу отображать все элементы, если щелкнуть фотографии, которые я хочу показать. Я пробовал использовать оператор switch, он работает нормально, но я пытаюсь найти другой кратчайший путь.

public items = [{
    value: 'All',
    name: 'All Items'
  },
  {
    value: 'Photos',
    name: 'Photo Items'
  },
  {
    value: 'Video',
    name: 'Video Items'
  },
];

}
.gallery {
  margin-top: 30px;
}
.card {
  background: whitesmoke;
  margin-top: 30px;
}
.data {
  display: inline-block;
  font-size: 22px;
  margin-top: 10px;
  margin-left: 30px;
}

<div *ngFor="let item of items" class="nav-li">
  <ul>
    <li class="value" [value]="item.value"><a href="">{{item.value}}</a></li>
  </ul>

</div>

<div class="gallery">
  <div *ngFor="let item of items" class="card">
    <div class="data">{{item.name}}</div>
  </div>
</div>

Answer 1

<!--Declare 'displayOption' in your ts file-->
  <div *ngFor="let item of items" class="nav-li">
   <ul>
    <li class="value" [value]="item.value">
      <a href="" (click)="displayOption = item.value"> 
       {{item.value}}</a>
    </li>
  </ul>
 </div>

<div class="gallery">
  <div *ngFor="let item of items" class="card">
    <div class="data" *ngIf="displayOption === item.value || displayOption === 'All'> 
      {{item.name}}
    </div>
 </div>

Answer 2

Вы можете фильтровать элементы по его значениям

app.component.ts

public items = [{
   value: 'All',
   name: 'All Items'
},
{
   value: 'Photos',
   name: 'Photo Items'
},
{
   value: 'Video',
   name: 'Video Items'
}];

itemsFiltered = this.items;

filterItems(filterBy) {
   if (filterBy == 'All') {
       this.itemsFiltered = this.items;
   } else {
       this.itemsFiltered = this.items.filter(m => m.value === filterBy)
   }
}

app.component. html

<div *ngFor="let item of items" class="nav-li">
   <ul>
     <li class="value" [value]="item.value">
        <a href="javascript:;" (click)="filterItems(item.value)">{{item.value}}</a> 
     </li>
   </ul>
</div>

<div class="gallery">
    <div *ngFor="let items of itemsFiltered" class="card">
      <div class="data">{{items.name}}</div>
    </div>
</div>