如果满足条件，角度显示表格中的行答案

【问题标题】：angular to display rows in the table if condition is met如果满足条件，角度显示表格中的行
【发布时间】：2020-12-18 22:06:19
【问题描述】：

我有通过 component.ts 从 .json 文件中获取的表格数据：

import lfirawdata from '../../../assets/json/data.json';
    interface lfiexport {
    
      id: string;
      sgm: string;
      pl: string;
      qr: string; 
}

export class lfiComponent implements OnInit{
  
  lfilist: lfiexport [] = lfirawdata;

然后，我在组件中使用 html 将其显示在表格中：

<tr *ngFor="let lfiexport of lfilist">
<td>{{lfiexport.id}}</td>
etc.

我想在表格顶部添加一个选择菜单，一旦您选择了值，表格将只显示那些具有该选定值的行。

<mat-form-field>
  <mat-select placeholder="Single City" name="city">
    <mat-option *ngFor="let sgm of sgms" [value]="sgm.value">
         {{ sgm.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

我尝试使用

，但它不起作用。谁能帮忙解决这个简单的问题？

谢谢

【问题讨论】：

我相信对你来说最好的解决方案是 ngFor 已经过过滤列表

标签： angular search filter

【解决方案1】：

您必须使用额外的数组来存储所有数据。所以一开始数组 data 和数组 lfilist 是相同的。然后，当您在下拉列表中选择某些项目时，您可以这样做

this.lfilist = this.data.filter(i => your_condition_expression)

表格将被更新

希望对你有帮助。

【讨论】：

【解决方案2】：

我认为你为什么不使用下拉菜单的更改事件并根据选定的值重新填充你的表格。

【讨论】：

虽然他可能认为这是一个答案或支持一个答案，但不提供代码可能会使这个答案更好地用作评论。