材料 2 表单控件选择不适用于异步源

Question

我正在使用 Material 2.0.0-beta.12 运行 Angular 4.3.4，并且在尝试创建 mat-select 以从异步源生成动态 mat-option 列表时遇到问题。我得到的只是占位符，下拉菜单不会扩展。我什至没有收到错误代码。

这是我的代码示例更新：

 <form [formGroup]="snoozeForm" novalidate>
  <div fxLayout="column">
    <mat-form-field>
      <mat-select formControlName="snooze_reason">
        <mat-option [value]="reason.attributes.snooze_reason_code" *ngFor="let reason of reasons">{{ reason }}</mat-option>
      </mat-select>
    </mat-form-field>
</form>

如您所见，reasons是动态填充的数组。我一定忽略了一些简单的事情，但我确信原因正在被填充。

这是我填充数组的位置：

ngOnInit() {
  this.generateForm();
  this.httpService.getSnoozeReasons()
    .subscribe( res => {
      this.reasons = res;
    }, (error: any) => {
      const msg: Message = { title: 'Frontend API Error', textbody1: '' };
      if (error.message) {
        msg.textbody1 = <any>error.message;
        msg.textbody2 = `Task-details component - Snooze reasons`;
      } else {
        msg.textbody1 = `HTTP ${error.status}: ${error.statusText}`;
        msg.textbody2 = `Task-details - Snooze reasons: ${error.url}`;
      }
      this.messageService.createMessage(msg);
    })
  ;
}

generateForm(): void {
  this.snoozeForm = this.fb.group({
    snooze_reason: ['', [Validators.required]],
    snooze_hour: ['', [Validators.pattern('[0-9]*'), Validators.max(72)]],
    snooze_minute: ['', [Validators.required, Validators.min(5), Validators.pattern('[0-9]*')]]
  });
}

有人遇到过异步数据和选择表单控件的问题吗？

Answer 1

我认为问题不是异步数组的原因，否则当您使用 formControlName="snooze_reason" 时，如果您尝试删除 formcontrolname，则“选择”工作正常。发生这种情况是因为 Angular 表单中的控件需要声明为表单组的子项。

import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'material-select-angular',
  templateUrl: 'material-select-angular.html',
})
export class MaterialSelectAngular implements OnInit {
  formParent = new FormGroup({
    snoozeReason: new FormControl()
  });
  reasons = [];
  
  ngOnInit(){
    setTimeout(() => {
      this.reasons = [
        {prop: 'something'},
        {prop: 'anything'},
        {prop: 'some'}
      ];
    }, 2000);
  }
}

<form [formGroup]="formParent">
<mat-form-field>
  <mat-select formControlName="snoozeReason" placeholder="Favorite food">
    <mat-option *ngFor="let reason of reasons" [value]="reason.prop">
      {{ reason.prop }}
    </mat-option>
  </mat-select>
</mat-form-field>
</form>

Answer 2

谢谢@Guillodacosta！

我有另一双眼睛来验证代码是否正确。我相信我现在的问题是我与我的 UI 包有冲突。 Ng-Bootstrap 可能会导致我的材质 2 选择无法正确渲染。

在过去的周末，我花了一些时间来复制我的场景，并验证我拥有的代码应该与填充“材质 2 选择”下拉列表的异步数据一起使用。

Answer 3

在我的情况下，当选项来自

Observable

（带有异步管道）时，垫选择没有打开，最后我通过一个空的垫选项解决了我的问题。你可以通过样式隐藏它;)

<mat-select [formControl]="..." (focusin)="loadLazy(...)">
    <mat-select-trigger>...</mat-select-trigger>
    <mat-option style="display: none" disabled="disabled">--select item--</mat-option>
    <ng-container *ngFor="let iOption of Options | async">
        <mat-option [value]="iOption.name">{{iOption.value}}</mat-option>
    </ng-container>
</mat-select>

返回：

protected loadLazy(...): Observable<any> {
  if (!this.Options)
    this.Options = new Observable(x => x.next(...));
  return this.Options;
}