时间戳

首页 > 解决方案 > 如何在 Angular 8 中通过匹配值来更改数据

html - 如何在 Angular 8 中通过匹配值来更改数据

问题描述

我正在尝试通过匹配值更改图库项目，默认情况下，如果单击我想显示照片的照片，我想显示所有项目。我尝试使用 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>

标签： htmlcssangulartypescript

解决方案

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

推荐阅读