角 |使用 setValue 更改 md-select 选项答案

【问题标题】：Angular | Change md-select option using setValue角 |使用 setValue 更改 md-select 选项
【发布时间】：2017-09-25 02:12:35
【问题描述】：

我正在尝试设置一个选择选项，但似乎无法使其正常工作。运行this.eventForm.controls.venue.setValue(event.venue.name); 会将venue 的值更改为event.venue.name，但选择选项不会改变。

组件.ts

const eventObject = this.db.object(`/events/${eventId}`);
    console.log(eventObject);

    this.existingEvent = eventObject
      .takeUntil(this.ngUnsubscribe)
      .subscribe((event: Object) => this.reForm(event),
      (error: any) => { console.log(error) }
      );

  reForm(event): void {

    if (this.eventForm) {
      this.eventForm.reset();
    }

    console.log(this.eventForm.controls.venue);

    this.eventForm.controls.venue.setValue(event.venue.name);

    this.eventForm.patchValue({
      category: event.category,
      date: event.date,
      // venue: event.venue.name,
      description: event.description,
      name: event.name,
    })
  }

component.html

<form [formGroup]="eventForm">

    <md-select class="example-full-width" [ngModelOptions]="{standalone: true}" placeholder="Venue"
                (change)="venueProcess($event)">
                <md-option *ngFor="let venue of venues | async" [value]="venue.$key">
                  {{ venue.name }}
                </md-option>
              </md-select>
</form>

*** 编辑。设置值后的图像

【问题讨论】：

您使用的是模板驱动表单还是响应式（又名模型驱动）表单？
表单是反应式的

标签： javascript angular

【解决方案1】：

试试

this.eventForm.controls.venue.setValue(event.venue.$key);

在 HTML 模板中，添加 formControlName 以绑定所有内容：

<md-select formControlName="venue" class="example-full-width" [ngModelOptions]="{standalone: true}" placeholder="Venue" (change)="venueProcess($event)">
   <md-option *ngFor="let venue of venues | async" [value]="venue.$key">
      {{ venue.name }}
   </md-option>
</md-select>

您使用venue.name 作为显示文本，venue.$key 作为选项值。您应该设置表单控件值以匹配选项值，而不是选项显示文本。

【讨论】：

有道理......但它不起作用。我尝试对选项键之一进行硬编码 this.eventForm.controls.venue.setValue('-KtXsBCzW8dkvfc_ahyg‌');但它没有改变。选择表单的值发生变化。我做了一个控制台 .log 的 console.log(this.eventForm.controls);和场地的价值变化。看我帖子里的图片。但是md-select 没有改变。
可能就是这样。我会检查并告诉你。谢谢。
是的。就是这样。谢谢！

【解决方案2】：

您必须在选择选项中添加 ngModel ，所以我希望下面的内容对你有用（仅限 HTML 更改）

<form [formGroup]="eventForm">

<md-select class="example-full-width" [ngModelOptions]="{standalone: true}" placeholder="Venue" [(ngModel)]="event.venue.name"
            (change)="venueProcess($event)">
            <md-option *ngFor="let venue of venues | async" [value]="venue.$key">
              {{ venue.name }}
            </md-option>
          </md-select>

【讨论】：

这不起作用。我没有财产事件...所以我无法获得event.venue.name。我试图做的是像这样设置一个属性v：this.v = event.venue.name 并在 ngModel 标签中使用它，如下所示：[(ngModel)]="v" ...但它给出了这个错误ERROR TypeError: Cannot read property 'hasValue' of undefined
你需要初始化"v"