角度7和角度材料如何获取mat-select的选定选项文本而不是其值

Question

我需要获取所选材料下拉列表的文本<mat-select>而不是其值：

<ng-container matColumnDef="fr">
        <th mat-header-cell *matHeaderCellDef> Family Rel. </th>
        <td mat-cell *matCellDef="let element; let i = index;">
          <div [formGroupName]="i">
            <mat-form-field color="warn" appearance="outline">
              <mat-label>Family Relation</mat-label>
              <mat-select #familyRelation (selectionChange)="onChange(element, i, 'hh')" id="family_relation"
                formControlName="fr" placeholder="Family Relation">
                <mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.family_relation_id">
                  {{familyRelation.family_relation_type}}
                </mat-option>
              </mat-select>
            </mat-form-field>&nbsp;
          </div>
        </td>
      </ng-container>

这是我正在尝试做的事情：

@ViewChild('familyRelation') familyRel: ElementRef;

并在下拉列表的更改选择上：

onChange(data, i, type) {
    let c = this.familyRel.nativeElement.innerText;
    console.log(c)
}

我有以下错误：

错误TypeError：无法读取未定义的属性'innerText'，位于

当我删除时innerText，控制台值为：

未定义

我需要什么，你可以在看stackblitz，如果我chosed Parent，我想Parent成为一个变量，而不是1这是它id。

请注意element，i和hhin (selectionChange)=onChange(element,...)在函数的后面使用，所以现在就算了吧。

Answer 1

很抱歉参加晚会。阅读以上所有答案真让我感到恐惧...

该解决方案比任何建议的答案都容易和直接得多，因为选择组件只是将选择的模型作为selectionChange参数的一部分传递。

但首先，对您的示例进行一些更正。您已声明接口，因此请使用它：

export interface FamilyRelation {
    id: number;
    type: string;
}

因此，在您的构造函数中：

 constructor() {
    this.familyRelationArray=[
    {
      id: 1,
      type: 'Parent'
    },
    {
      id: 2,
      type: 'Sister'
    }
  ]
}

而不是您在StackBlitz中放置的内容...那么您的视图将变为：

<mat-select (selectionChange)="onChange($event)" id="family_relation" placeholder="Family Relation">
    <mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.id">
        {{familyRelation.type}}
    </mat-option>
</mat-select>

不需要每个mat-option的（单击）处理程序，因为这不是必需的，并且如果您有很多选择，可能会导致性能问题。现在，在控制器上：

onChange(ev: any) {
   let optionText = ev.source.selected.viewValue;
   console.log(optionText);
}

或者，如果您愿意，可以输入类型变量：

onChange(ev: MatSelectChange) {
   let optionText = (ev.source.selected as MatOption).viewValue;  //use .value if you want to get the key of Option
   console.log(optionText);
}

但不要忘记进口...

import { MatSelectChange } from '@angular/material/select';
import { MatOption } from '@angular/material/core';

Answer 2

更新了代码，并添加了click事件options

https://stackblitz.com/edit/angular-material-w89kwc?embed=1&file=app/app.component.ts

新增一项功能

  getInnerText(innerText){
    console.log(innerText)
  }

视图中添加点击事件

<mat-option *ngFor="let familyRelation of familyRelationArray;" [value]="familyRelation.family_relation_id" (click)="getInnerText(familyRelation.family_relation_type)">
    {{familyRelation.family_relation_type}}
</mat-option>