HTML 变量忽略双括号答案

【问题标题】：HTML Variables ignores double bracketsHTML 变量忽略双括号
【发布时间】：2016-10-11 18:08:10
【问题描述】：

真正的问题是我的角度根本不起作用

如果您想对此进行测试，请执行以下操作：

import { Component, OnInit} from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

     ngOnInit() {
        console.log('test');
    }
}

//////////////////////////////////

我正在尝试创建一个名称和值彼此不同的下拉列表。在 Visual Studio 2015 中，“>{{directionOption.name}}

<select [(ngModel)]="direction">
<option *ngFor="#directionOption of directionOptions" [value]="directionOption.value">{{directionOption.name}}</option>
</select>

同样的结果

<select [(ngModel)]="direction">
<option *ngFor="let directionOption of directionOptions" [value]="directionOption.value">{{directionOption.name}}</option>
</select>



export class AppComponent implements OnInit {

direction: any = { 'Left': 'L' };
directionOptions: any = [{ name: 'Left', value: 'L' }, { name: 'Right', value: 'R' }, { name: 'None', value: 'N' }];
}

浏览器F12内的当前结果

<option *ngfor="#directionOption of directionOptions" [value]="directionOption.value">{{directionOption.name}}</option>

【问题讨论】：

directionOptions 没有name
是的。 @GünterZöchbauer 是正确的。
我想念哪个名字@GünterZöchbauer
等一下，你在 directionOptions 数据中没有正确的数据。
如果“浏览器 F12 中的当前结果”实际上显示在您的浏览器开发工具中，那么您的应用程序存在严重问题。 Angular2 不会处理动态添加到 DOM 的绑定，只有当它们静态添加到组件模板时。

标签： html angular visual-studio-2015

【解决方案1】：

使用let 关键字代替#，

<option *ngfor="let directionOption of directionOptions" [value]="directionOption.value">{{directionOption.name}}</option>

【讨论】：

试过了，好像没什么区别
究竟是什么问题？
很可能我的阵列不能与 *ngFor 一起使用，可能我需要调整它
正确的方向选项具有正确的值，如@Gaunter所示。

【解决方案2】：

更新

Angular2 不会处理动态添加到 DOM 的绑定，只有当它们静态添加到组件模板时。

原创

directionOptions 应该是这样的

directionOptions: any = [{ name: 'Left' , value: 'L' }, { name: 'Right' , value: 'R' }, { name: 'None' , value: 'N' }];

【讨论】：