时间戳

首页 > 解决方案 > 使用下拉列表第二次过滤表不返回任何内容

angular - 使用下拉列表第二次过滤表不返回任何内容

问题描述

我已经使用 Angular 7 编写了一个 CRUD 应用程序，但问题是当我第一次选择一个下拉项目时它返回所需的表数据，但是当我第二次选择另一个项目时它什么也不返回。这是我的组件代码：

public patientList: Patient[];

public datess = [
    {value: '1397-11-29', viewValue: 'Test'},
    {value: '1397-11-24', viewValue: '--All Data--'},
    {value: this.todayJalali, viewValue: 'Today'},
  ];
    constructor(private patientService: PatientService) { this.getDates() }

  getDates() {  
    return this.datess;  
  } 

  SearchDate(date: string) {  
    let obj = this.patientList.filter(m => m.Date == date);  
    this.patientList = obj;  
    return this.patientList;  
  }

这是我的标记：

<select placeholder="Show Data" [(ngModel)]="datess.value" (ngModelChange)="SearchDate(datess.value)">
          <option *ngFor="let date of datess" [value]="date.value" style="text-align:right">
              {{date.viewValue}}
            </option>
        </select>

<tr *ngFor="let patient of patientList | grdFilter: {LastName: searchText, FullName:searchText} | paginate: { itemsPerPage: 7, currentPage: p } ; let i = index;" (click)="selectPatient($event, patient)" [class.highlighted]="patient.FirstName + ' ' + patient.LastName === currentPatient">

我的第二个是我想通过使用下拉列表的 (--All Data--) 项返回所有数据，但我不需要将其作为值放置。我以前用材料写过这个应用程序，为此我放置了空值('')，它显示了所有数据。但在这里我不知道我必须插入什么作为价值。

第一次选择

第二次选择

谢谢你....

标签： angular

解决方案

您可以将value所有日期的 设置为null，因此我们知道，如果值不存在，我们希望显示所有患者。

同样正如 Marcin 所提到的，您正在过滤和重新过滤同一个数组，您可以使用辅助数组来解决您的问题。因此，将所有数据保存在一个数组中，为简单起见，我们称之为data。在那里，您拥有数组中的所有项目。从那个，我们过滤想要的日期patientList。在搜索中，我们检查日期是否存在，如果不存在，我们可以使用扩展运算符从您的data数组中复制值......所以：

SearchDate(date: any) {
  date ? this.patientList = this.data.filter(m => m.Date == date) : 
         this.patientList = [...this.data]
}

现在当我们使用时null，我们想ngValue在模板中使用，否则这将被翻译成字符串null：

<option *ngFor="let date of datess" [ngValue]="date.value">

最后，在更改之后，您的datess数组将如下所示：

public datess = [
  {value: '1397-11-29', viewValue: 'Test'},
  {value: null, viewValue: '--All Data--'},
  {value: this.todayJalali, viewValue: 'Today'},
];

推荐阅读