如何从Angular Mat-select字段中将选定的选项输出为HTML中的文本？

Question

** 更新 **

因此，我希望在另一个选项卡上以摘要形式将多选中的项目列表显示为纯文本。标准输入很好，但是多选引起了问题。

以前，我曾将对象数组与ngFor一起使用。但是，当检查多重选择的.value时，它显示为空白，这是行不通的。删除.value输出[object Object]（见下图）

general.component.html

<div class="form-group">
    <span>Funding Programmes:*</span>
    <mat-select #FundingProgKey class="form-control" placeholder="Funding Programmes" formControlName="FundingProgKey" multiple [compareWith]="compare">
        <mat-option>-- None --</mat-option>
        <mat-option *ngFor="let programme of programmeList" [value]="programme">{{programme.Description}}</mat-option>
    </mat-select>
</div>

<strong>Funding Programme(s):</strong>{{FundingProgKey}}<br />
<strong>Additional Funding Programme(s):</strong> {{FundingProgAddInfo.value}}<br />

programme.dto.ts

export class Programme {
    FundingProgKey: number;
    Name: string;
    Description: string;
}

非常感谢您的帮助

- 亲切的问候

刘易斯

Answer 1

解决方案是如果要使用此功能，请不要使用FormController。我们将代码重构为使用ngModel，而从Angular7中删除了将ngModel与FormControl一起使用的功能。

ngModel少了很多代码，而且看起来更快。

希望这会有所帮助