Question

我已经使用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--）项目返回所有数据，但我不必将其作为值。我之前用这个材料编写过这个应用程序，为此我放置了一个空值('')，它显示了所有数据。但是在这里，我不知道要插入什么作为值。

First Time Select

Second Time Select

谢谢。...

Answer 1

您可以将所有日期的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'},
];

通过使用下拉列表第二次筛选表不返回任何内容

1 个答案: