Question

我有由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>

我尝试使用做到这一点，但是它不起作用。谁能提供这个简单的解决方案？

谢谢

Answer 1

我认为是什么，为什么不使用下拉列表的change事件并根据选择的值重新填充您的表。

Answer 2

您必须使用其他数组来满足所有数据的需求。因此，开始时数组 data 和数组 lfilist 是相同的。然后，当您在下拉菜单中选择某项时，您可以

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

表将被更新

希望这可以为您提供帮助。

如果满足条件，在表中显示行的角度

2 个答案: