Angular 4中的运行时绑定

Question

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

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>  

所以在变量WHICHFIELDTODISPLAY是我要显示的字段的名称，让我们说“longName”。

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

Answer 1

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

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