Angular 4 中的运行时绑定答案

【问题标题】：runtime binding in Angular 4Angular 4 中的运行时绑定
【发布时间】：2018-06-07 16:29:54
【问题描述】：

您好，我是新开发的 Angular 应用程序。但是，我想在运行时绑定一个 html 选择元素选项显示，看看我的代码。我正在使用打字稿。我有这门课。

export class Gender{
constructor(short:string, long:string){
    this.shortName = short;
    this.longName = long;
}
shortName:string;
longName:string;

}

我正在尝试像这样绑定

<select class="form-control" [(ngModel)]="selectedOption">
        <option *ngFor="let opt of options" [ngValue]="opt">  
            {{opt."DYNAMICALLY INSERT THE NAME OF THE FIELD TO DISPLAY"}}
        </option>
    </select>

我想在运行时定义将显示哪个字段。假设我想做这样的事情

<select class="form-control" [(ngModel)]="selectedOption">
        <option *ngFor="let opt of options" [ngValue]="opt">  
            {{opt.WHICHFIELDTODISPLAY}}
        </option>
    </select>

所以在 valriable WHIHFIELDTODISPLAY 中是我要显示的字段的名称，比如说“longName”。

那么，如何使用 Angular 4 和 TypeScript 在选择选项元素中绑定动态值？

【问题讨论】：

经过几个小时的研究和学习 Angular 绑定以及更多关于 TypeScript 的知识，我找到了我的解决方案。 {{opt[WHICHFIELDTODISPLAY]}}这对我有用。

标签： javascript angular typescript drop-down-menu binding

【解决方案1】：

您可以尝试显示放置在 [] 中的值，而不是 dot operator

 <option *ngFor="let opt of options" [ngValue]="opt">  
            {{opt[WHICHFIELDTODISPLAY]}}
</option>

【讨论】：