如何将 Angular Mat-select 字段中的 selected 选项输出为 Html 中的文本？

Question

** 已更新 **

所以我正在考虑在另一个选项卡上以纯文本形式显示多个 select 中的项目列表作为摘要。标准输入没问题，但多 selects 导致了问题。

之前我用过对象数组和ngFor。然而，这在检查 multi select 的 .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 代码少了很多而且似乎更快。

希望对您有所帮助

如何将 Angular Mat-select 字段中的 selected 选项输出为 Html 中的文本？

How do you output the selected options from an Angular Mat-select field as text in Html?

multi-select

angular-material

angular7