选择组件在第二次交互之前不会渲染值

Question

选择在与他第二次交互之前不会渲染数据。

<div class="align-items-center">
          <label class="form-label">Select Value</label>
          <div class="input-group">
            <select formControlName="idUsuario" class="form-select" aria-label="Select Value">
              <option value="">-- Value--</option>
              @for (value of valueList; track usuario.id) {
                <option [value]="value .id">{{ value .option}} {{ value .option2}}</option>
              }
            </select>
          </div>

        </div>

问题是，当页面加载时，选择没有任何值。我第一次点击它，但仍然没有值。当我将焦点移至页面的其他部分，然后第二次单击选择时，它具有值。可能是什么？

这是组件中的相关代码。

  public valueList: Value[] = [];

  ngOnInit(): void {
    this.valueServie.ggetValues().subscribe((values) => {
      this.valueList = values;
    });
  }

Answer 1

使用变更检测策略时

OnPush

，组件的 DOM 仅在以下情况之一适用时才会更新：

• 输入发生变化
• 事件侦听器运行
• 该组件已通过

  ChangeDetectorRef

标记为待检查

在你的情况下，这些都不适用，这就是 DOM 不更新的原因。有多种方法可以修复它：

1. 数据设置好后，注入

   ChangeDetectorRef

   并调用

   markForCheck()

   。

constructor(private readonly cdr: ChangeDetectorRef) {}

ngOnInit(): void {
  this.valueServie.ggetValues().subscribe((values) => {
    this.valueList = values;
    this.cdr.markForCheck();
  });
}

2. 使用

   async

   管道标记组件，以便在收到数据后在引擎盖下进行检查：

public valueList$: Observable<Value[]>;

constructor() {
  this.valueList$ = this.valueServie.ggetValues();
}

<select>
  @for (value of valueList$ | async; track usuario.id) {
    <option [value]="value.id">{{ value.option}} {{ value.option2}}</option>
  }
</select>

3. 使用默认更改检测策略。请注意，这将大大增加 DOM 更新的数量，并可能导致性能下降。