Question

我有两个选择框。在第一个选择框中选择一个值后，将调用服务器以填充第二个选择框。由于第二次呼叫由于无法控制的原因花费了约10秒的时间，因此我想显示一个提示，例如“请稍等，从服务器获取XYZ”。

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

我正在使用Angular CLI 7.0.2，Angular 7.0.0和节点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>

有效的堆叠闪电战：https://stackblitz.com/edit/angular-fkjd8m-qm8mxp

很明显，这并不是matHint（或hintLabel）的最初意图。但是，如何在填充第一个选择之后使提示针对第二个选择显示？我是否必须为实际的第二选择下拉菜单添加一个ViewChild并将其强制聚焦？

Answer 1

与其尝试动态设置hintLabel @Input，不如将其绑定到变量并动态设置变量内容：

<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.";
}

Answer 2

为什么不使用“ placeHolder”。您可以在第二件事中使用“点击”来显示不同的值。如果this.secondThing返回null值是因为正在加载数据，则显示类似“选择选项”的消息。

请参阅your forked stackblitz

重要的部分是：

yourmodule.module.ts

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[ ],
  declarations: []
})

发生更改时，请先发送一个空值

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

    }))

Answer 3

您可以在模板中静态分配mat-hint并使用布尔变量而不是mat-form-field提示进行显示...这样，您可以显示提示并以编程方式将其隐藏而无需关注。

https://stackblitz.com/edit/angular-fkjd8m-przarn?embed=1&file=app/form-field-overview-example.html

在mat-form-field上动态添加的hintLabel仅在组件获得焦点后才可见

3 个答案: