javascript - 更新 mat-select defaultValue 不起作用

Question

我有一个视图（表），其中有一个操作，当我单击该操作时，我会传递表中该行的值以更新使用它打开的模式的 defaultValue。我在模式中有下拉菜单，我正确获得了 defaultSelection 的 Id，甚至下拉组件也会相应地更新。

发生的事情是 defaultValue 保持不变，当我选择不同的行时它不会更新：

这是我输入的地方：

  <app-ui-input-select
    (selectionChanged)="onCreateSelectionChange($event, 'typeId')"
    [options]="attributes"
    [defaultValue]="duplicatedOriginValueRow.type"
    class="master-data-modal-attributes-filter"
    [label]="'Type*'"
    [tooltip]="'Type*'">

每次我用与 id 对应的新类型更新duplicatedOriginValueRow对象时，它不会在内部更新，我没有传递对象的相同引用，只是为了让你们现在。

这是我的组件输入选择 HTML：

<mat-form-field appearance="outline" floatLabel="always" [matTooltip]="tooltip">
  <mat-label *ngIf="label">{{ label }}</mat-label>
  <mat-select
    [(ngModel)]="defaultValue.value"
    (selectionChange)="selectionChanged.emit($event)"
    [formControl]="selectControl"
    name="name"
    disableOptionCentering
  >
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{
        isTitleString(option.title) ? (option.title | uppercase) : option.title
      }}
    </mat-option>
  </mat-select>
</mat-form-field>

我的 TS 文件：

import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  Input,
  forwardRef,
  OnDestroy,
  Output,
  EventEmitter,
  SimpleChanges,
  OnChanges,
} from '@angular/core';
import {
  ControlValueAccessor,
  FormControl,
  NG_VALUE_ACCESSOR,
} from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-ui-input-select',
  templateUrl: './ui-input-select.component.html',
  styleUrls: ['./ui-input-select.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => UiInputSelectComponent),
    },
  ],
})
export class UiInputSelectComponent
  implements OnInit, OnDestroy, ControlValueAccessor, OnChanges {
  @Input() name?: string;
  @Input() label?: string;
  @Input() tooltip?: string;
  @Input() options: { title: string; value: any }[] = [];

  @Input() defaultValue = { title: '', value: '' };
  _defaultValue = {title: '', value: ''}

  @Output() emitDefinedColumnValue = new EventEmitter<string>();
  @Output() selectionChanged = new EventEmitter<string>();

  readonly selectControl: FormControl = new FormControl(null);
  private readonly subscriptions: Subscription[] = [];

  private readonly changeListeners: ((value) => void)[] = [];
  private readonly touchedListeners: (() => void)[] = [];

  ngOnInit(): void {
    const sub = this.selectControl.valueChanges.subscribe((value) =>
      this.notifyChange(value)
    );
    this.subscriptions.push(sub);
  }

  ngOnChanges(changes: SimpleChanges) {
    if(changes.defaultValue.currentValue) {
      this._defaultValue = changes.defaultValue.currentValue
    }
  }

  compareById(f1: any, f2: any): boolean {
    return f1 && f2 && f1.value === f2.value;
}

  ngOnDestroy(): void {
    this.subscriptions.forEach((s) => s.unsubscribe());
  }

  registerOnChange(fn: any): void {
    this.changeListeners.push(fn);
  }

  registerOnTouched(fn: any): void {
    this.touchedListeners.push(fn);
  }

  setDisabledState(isDisabled: boolean): void {
    if (isDisabled) {
      this.selectControl.disable();
    } else {
      this.selectControl.enable();
    }
  }

  writeValue(obj: any): void {
    this.selectControl.setValue(obj, { emitEvent: false });
  }

  notifyTouched(): void {
    for (const listener of this.touchedListeners) {
      listener();
    }
  }

  isTitleString(title: string): boolean {
    return typeof title === 'string';
  }

  notifyChange(value: any): void {
    this.notifyTouched();
    for (const listener of this.changeListeners) {
      listener(value);
    }
  }
}

我还尝试检查 ngOnChanges 生命周期钩子中的内容，并且在那里我得到了正确的值（更改后的值），似乎下拉列表没有更新 html。

我感谢任何帮助。

非常感谢！

标签： javascriptangulartypescriptangular-materialmaterial-ui