Angular 7：使用 mat-select：动态获取 mat-option 的选项会创建一个永无止境的循环

Question

目标是根据我的 angular 组件中的某些条件更改我的下拉列表的选项。 html 看起来像这样：

                <mat-label>{{jobStatus}}</mat-label>
                <mat-select [formControl]="jobStatusModificationControl" panelClass="mcCoyDropDown">
                  <mat-option *ngFor="let option of getJobStatusModificationOptions()" [value]="option.value"
                    (onSelectionChange)="changeJobStatus($event)">
                    {{option.option}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

该组件如下所示：

getJobStatusModificationOptions() {
    let jobStatusModificationOptions = [
      { option: "Close Job", value: JobStatusEnum.Closed },
      { option: "Activate Job", value: JobStatusEnum.Active }
    ];

    if (this.jobStatus == JobStatusEnum.Closed) {
      jobStatusModificationOptions = [
        { option: "Open Job", value: JobStatusEnum.Closed },
        { option: "Activate Job", value: JobStatusEnum.Active }
      ];
    }
    else if (this.jobStatus == JobStatusEnum.Active) {
      jobStatusModificationOptions = [
        { option: "Close Job", value: JobStatusEnum.Closed },
        { option: "Open Job", value: JobStatusEnum.Opened }
      ];
    }
    return jobStatusModificationOptions;

所以根据条件，jobStatusModificationOptions 会改变。 我只在 html 中调用这个 function 而不是在 ngOnInit() 中。 结果是永无止境的外观。 我可以在 return jobStatusModificationOptions 行设置一个断点并整天打它。

有没有办法动态设置这些垫子选项，或者我需要设置 3 个下拉菜单并在条件下使用 ngFor。 我不想那样做，因为它太乱了。

Answer 1

这里的问题是每次调用getJobStatusModificationOptions()时它都会返回一个新指针，尽管内部数据是相同的。

如果数据相同，请尝试在调用之间保持返回值的指针相同。

例如像这样：

private readonly statuses = {
    [JobStatusEnum.Closed]: [
        {option: "Open Job", value: JobStatusEnum.Closed},
        {option: "Activate Job", value: JobStatusEnum.Active},
    ],
    [JobStatusEnum.Active]: [
        {option: "Close Job", value: JobStatusEnum.Closed},
        {option: "Open Job", value: JobStatusEnum.Opened},
    ],
    [JobStatusEnum.Opened]: [
        {option: "Close Job", value: JobStatusEnum.Closed},
        {option: "Activate Job", value: JobStatusEnum.Active},
    ]
};

getJobStatusModificationOptions() {
    if (this.jobStatus == JobStatusEnum.Closed) {
        return this.statuses[JobStatusEnum.Closed];
    }
    if (this.jobStatus == JobStatusEnum.Active) {
        return this.statuses[JobStatusEnum.Active];
    }
    return return this.statuses[JobStatusEnum.Opened];
}

现在 angular 可以检测到返回的值没有改变并跳过重新渲染。