Angular 如何在下拉列表窗体控件中获取选定值的文本而不是值

我有没有一种方法来获取下拉列表中所选值的文本，而不是以被动形式获取值

我的脚本如下所示：

<form [formGroup]="formGroup" formArrayName="test">
    <ng-container matColumnDef="fr" formArrayName="test">
            <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" >
                    <mat-label>Family Relation</mat-label>
                    <mat-select (selectionChange)="onChange(element, i)" 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>
</form>

其中数据是所选行，

i

是所选表单数组的索引

我尝试使用旧的javascript方法：

<HTMLSelectElement>document.getElementById().text

以及：

{{familyRelation.family_relation_type}

安慰之后：

---

首先，从表单控件获取值。然后通过循环数组获取与值相关的项。最后从项目中获取文本

onChange(data, i)
  {
    let text = formGroup.get("fr").value;
    let newFr =this.familyRelationArray.find((item) => item.family_relation_id === text)
    if(newFr){
        console.log('text: '+newFr.family_relation_type); 
    }
  }

---

根据您的评论，您需要一种访问html元素的通用方法。角度提供了一个

---

[value]=“家庭关系.家庭关系类型”

。。。我将从控制台开始，按原样将整个html元素记录在浏览器检查工具中，然后遍历它，直到找到所需的属性。。顺便说一下-您没有为方法提供id；）@您是否意识到“文本”是您从对象提供的字符串？只需匹配对象并获取“文本”你能举一个例子说明“一般”情况吗？@alim1990你有没有考虑过将

#familyRelation

与

@ViewChild（'familyRelation'）

一起使用？这是一种获取html元素参考的“角度方法”。然后您可以访问innerHTML@Florian更好，

@ViewChild('familyRelation') familyRelation;

<mat-select #familyRelation (selectionChange)="onChange(element, i)" 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>

onChange(data, i)
  {
    let text = formGroup.get("fr").value;
    let newFr =this.familyRelationArray.find((item) => item.family_relation_id === text)
    if(newFr){
        console.log('text: '+newFr.family_relation_type); 
    }
  }

<mat-select #selectFamilyRelation
            (selectionChange)="onChange()" 
            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>

onChange() {
  const selectedOptionText = this.familyRelation._elementRef.nativeElement.innerText;
  // ...
}