Angular 7 - 不从模板触发“valueChanges”（使用mat-option）答案

【问题标题】：Angular 7 - not triggering "valueChanges" from the template (using mat-option)Angular 7 - 不从模板触发“valueChanges”（使用mat-option）
【发布时间】：2019-12-06 09:29:32
【问题描述】：

我有一个表单控件。在我的模板中，我使用 mat-option 对其进行更改，但我希望此特定更改不会触发 valueChanges（我有其他更改，我希望调用“valueChanges”）。

我的组件-

inputControl = new FormControl('');


    ngOnInit() {
        this.inputControl.valueChanges
            .pipe(takeUntil(this.onDestroy))
            .subscribe(val => {
              //do something
            });
    }

html-

<ng-container *ngIf="inputControl.value as val">
        <mat-option *ngFor="let result of autocompleteResults; let i = index" [value]="result.displayName"
                    (onSelectionChange)="searchByResult($event, result)">
           {{result.displayName}}
        </mat-option>
    </ng-container>

知道这是否可能吗？

【问题讨论】：

selectionChange 事件应该在 mat-select 上，而不是在 mat-option 上； ;;;;;;;;;;;例如：

标签： javascript angular typescript angular-reactive-forms

【解决方案1】：

您的 mat-option 必须包含在 mat-select 中，如下所示

  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

查看角材料的文档。它有很好的代码 sn-ps 示例

链接如下： https://material.angular.io/components/select/overview

【讨论】：