如何在 Angular 9 中正确使用过滤器方法？答案

【问题标题】：How to use filter method correctly in Angular 9?如何在 Angular 9 中正确使用过滤器方法？
【发布时间】：2020-09-24 18:34:04
【问题描述】：

我的服务检索 ExceptionReportSessionData 接口的列表。一个会话可以有许多或没有与之关联的 ReportFiles。我不知道该怎么做是，如果用户从第一个下拉框中选择一个会话，我只希望他们在与该会话关联的第二个下拉框中看到 ReportFiles。

这是我目前拥有的：

component.ts:

export class OrderExceptionReportComponent implements OnInit {

  public sessionData: ExceptionReportSessionData[] = [];
  currentSession: ExceptionReportSessionData = null;
  selectedReport: string;
  index: number;


  constructor(private orderExceptionReportService: OrderExceptionReportService) {
  }

  private async getExceptionReportSessionData(): Promise<void> {
    this.orderExceptionReportService.GetExceptionReportSessionData()
      .then(
        data => {
          this.sessionData = data;
          console.log(this.sessionData)
        });
  }


  sessionDataChange(value: any) {
    this.index = value.target.selectedIndex;
    this.currentSession = this.sessionData[value.target.selectedIndex];
    // this.currentSession = value;
  }


  ngOnInit() {
    this.getExceptionReportSessionData(); 
  }

html:

<div class="dropdown">
  <div class="input-group">
    <h4>Session: </h4>
    <select [(ngModel)]='currentSession'
            class="custom-select form-control-sm"
            (change)='sessionDataChange($event)'
            id="inputGroupSelect01">
      <option [value]="null">Select session...</option>
      <option *ngFor="let session of sessionData" [value]='session'>
        {{session.sessionName}}
      </option>
    </select>
  </div>
  <div *ngIf='currentSession' class="input-group">
    <h4>Report Date: </h4>
    <select [(ngModel)]='selectedReport' class="custom-select form-control-sm" id="inputGroupSelect01">
      <option [value]="null">Select report...</option>
      <option *ngFor="let report of currentSession.ReportFiles"
              [value]="report">
        {{report}}
      </option>

    </select>
  </div>

Interface.ts：

export interface ExceptionReportSessionData {
  SessionName: string,
  ReportFiles: Array<string>
}

【问题讨论】：

标签： html angular typescript filter

【解决方案1】：

我创建了一个堆栈闪电战来解决您的问题here。

解决方案是跟踪当前在第一个 <select> 标记中选择的会话，并将当前选择的会话的报告填写到第二个 select 标记中。

但是您的代码中有一些错误，我在下面解决了它们：

在常规 HTML 中，我们不能将对象类型设置为 option 的值。它会自动将对象转换为"[object Object]" 的<option> 值。为了解决这个问题，我让 Angular 在你的第一个 select 标签上监听一个选择事件，抓住选择选项的索引并将其匹配回 ExceptionReportSessionData 组件中的数组位置（我创建了一些虚拟数据）。

让 Angular 监听选择事件：

HTML：

<select (change) = "func($event.target.selectedIndex)">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

TypeScript

func(index: number) {
  // index of the selected option 
}

其次，我使用 *ngIf 隐藏了第二个，直到选择了一个会话（并设置为 currentSession）。这将防止 HTML 在未定义 currentSession 时抛出有关尝试访问未定义字段的任何错误。

最后，在部分中，我简单地使用 *ngFor 迭代了 reports 并设置了 .我们现在可以成功地做到这一点，因为reports 键的每个元素都是一个字符串。

【讨论】：

更新了您的实施问题