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, а не в 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 может определить, что возвращаемое значение не было изменено, и пропустить повторную визуализацию.