Angular 动态添加的hintLabel on mat form字段仅在组件接收到焦点后才可见

我有两个选择框。在第一个选择框中选择值时，将调用服务器以填充第二个选择框。由于我无法控制的原因，第二次调用需要约10秒的时间，因此我想显示一个类似“请稍候，从服务器获取XYZ”的提示

我在第一个选择框中为selectchange事件设置了一个事件处理程序，它正确地设置了第二个框中的提示。但是，第二个框在收到焦点之前不会显示提示。（如果我尝试将提示放在第一个框中，它会立即显示提示，因为它已经具有焦点。）

我使用的是Angular CLI 7.0.2、Angular 7.0.0和node 8.11.1

组件ts：

@ViewChild("otherSelect")
secondSelect: MatFormField;

onFirstThingSelect(event: MatSelectChange ) {
 this.secondSelect.hintLabel = "Please wait, loading...";
 // expensive/slow call to populate secondSelect goes here
}

组件html：

<mat-form-field #firstSelect>
  <mat-select placeholder="First Thing" (selectionChange)="onFirstThingSelect($event)">
    <mat-option *ngFor="let first of firstThings$ | async" [value]="first">
      {{first}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field class="col-md-4" #otherSelect>
  <mat-select placeholder="Second Thing">
    <mat-option *ngFor="let second of secondThings$ | async" [value]="second">
      {{second}}
    </mat-option>
  </mat-select>
</mat-form-field>

{{first}}
{{second}}

工作人员突击检查：

---

显然，这不是matHint（或hintLabel）最初的用意。但是，在填充第一个select之后，如何使提示针对第二个select显示？我必须为实际的第二个“选择”下拉列表添加ViewChild并强制将焦点放在其上吗？

您可以在模板中静态分配mat提示，并使用布尔变量而不是mat表单字段提示进行显示。。。通过这种方式，您可以以编程方式显示提示并隐藏它，而无需焦点

---

您可以在模板中静态分配mat提示，并使用布尔变量而不是mat表单字段提示进行显示。。。通过这种方式，您可以以编程方式显示提示并隐藏它，而无需焦点

---

与其尝试动态设置

hintLabel

@输入，不如将其绑定到变量并动态设置变量内容：

<mat-form-field class="col-md-4" [hintLabel]="hintLabel">
  <mat-select placeholder="Second Thing">
    <mat-option *ngFor="let second of secondThings$ | async" [value]="second">
      {{second}}
    </mat-option>
  </mat-select>
</mat-form-field>


hintLabel = '';

onFirstThingSelect(event: MatSelectChange ) {
  this.hintLabel = "I should become visible when First Thing is selected.";
}

{{second}}
hintLabel=''；
onFirstThingSelect（事件：MatSelectChange）{
this.hintLabel=“当选择第一件事时，我应该可见。”；
}

与其尝试动态设置

hintLabel

@输入，不如将其绑定到变量并动态设置变量内容：

<mat-form-field class="col-md-4" [hintLabel]="hintLabel">
  <mat-select placeholder="Second Thing">
    <mat-option *ngFor="let second of secondThings$ | async" [value]="second">
      {{second}}
    </mat-option>
  </mat-select>
</mat-form-field>


hintLabel = '';

onFirstThingSelect(event: MatSelectChange ) {
  this.hintLabel = "I should become visible when First Thing is selected.";
}

{{second}}
hintLabel=''；
onFirstThingSelect（事件：MatSelectChange）{
this.hintLabel=“当选择第一件事时，我应该可见。”；
}

为什么不使用“占位符”。 您可以在第二件事中使用“tap”来显示不同的值。如果this.secondThing返回空值是因为正在加载数据，否则将显示类似“Select Option”的消息

看

重要的部分是：

this.secondThings$ = this._seconds.asObservable().pipe(tap((res) => {
      if (!res)
        this.secondPlaceHolder.placeHolder = "Loadding data...";
      else
        this.secondPlaceHolder.placeholder = "Select Option.";

    }))

发生更改时，首先发送一个null

  onFirstThingSelect(event: MatSelectChange) {
    this._seconds.next(null); //<--send a null before loading the data
    setTimeout(() => {
      this._seconds.next(["AA", "BB", "CC"]);
    }, 2000)
  }

onFirstThingSelect（事件：MatSelectChange）{
此。_秒。下一个（空）；//{
这个。_秒。下一个（[“AA”、“BB”、“CC”）；
}, 2000)
}

为什么不使用“占位符”。 您可以在第二件事中使用“tap”来显示不同的值。如果this.secondThing返回空值是因为正在加载数据，否则将显示类似“Select Option”的消息

看

重要的部分是：

this.secondThings$ = this._seconds.asObservable().pipe(tap((res) => {
      if (!res)
        this.secondPlaceHolder.placeHolder = "Loadding data...";
      else
        this.secondPlaceHolder.placeholder = "Select Option.";

    }))

发生更改时，首先发送一个null

  onFirstThingSelect(event: MatSelectChange) {
    this._seconds.next(null); //<--send a null before loading the data
    setTimeout(() => {
      this._seconds.next(["AA", "BB", "CC"]);
    }, 2000)
  }

onFirstThingSelect（事件：MatSelectChange）{
此。_秒。下一个（空）；//{
这个。_秒。下一个（[“AA”、“BB”、“CC”）；
}, 2000)
}

您能解决这个问题吗？@Marshal--下面列出的所有备选解决方案都有效。这是将来回顾您的问题的人的好信息。谢谢你的更新。你能解决这个问题吗？@Marshal——下面列出的所有备选解决方案都有效。这对于将来回顾你的问题的人来说是一个很好的信息。谢谢你的更新。