ngFor 中的引用变量不起作用

Question

我想使用 *ngFor

将以下 HTML 代码转换为 Angular 代码

<div>Children: <input type="radio" id="1" name="children" [value]="1" [(ngModel)]="this.children"/>1
      <input type="radio" id="2" name="children" [value]="2" [(ngModel)]="this.children"/>2
      <input type="radio" id="3" name="children" [value]="3" [(ngModel)]="this.children"/>3
      You have {{this.children}} children
      </div>

Angular代码

<div>Children: <input *ngFor = "let option of selectOptions" type="radio" id=option name="children" [value]=option [(ngModel)]="this.children"/>{{option}}
        You have {{this.children}} children
      </div>

selectOptions在Component的class中定义如下：

selectOptions:Array<number>=[1,2,3]

我可以看到 {{option}} 的错误 Angular: Identifier 'option' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

我还看到 id=option name="children" 和 tag start is not closed 的错误。

我做错了什么？

Answer 1

我是这样使用你的代码的：

<div>Children: <input *ngFor = "let option of selectOptions" type="radio" id={{option}} name="children" [value]=option />{{option}}
        You have {{this.children}} children
</div>

它使用了这个结果：

生成此 html：

Answer 2

似乎有一个问题是，一旦输入标签关闭，选项就会超出范围。如果我将 *ngFor 移动到 div ，那么我就会得到标签。但它们现在是垂直显示的，而不是水平显示的。此代码有效，但垂直对齐 <div *ngFor = "let option of selectOptions"> <input type="radio" [id]="option" name="children" [value]=option [(ngModel)]="this.children">{{option}} </div>

对于水平对齐，这很有效。我没有重复 div，而是重复了标签。标签包装输入，因此选项在输入范围内 - <div > <label *ngFor = "let option of this.selectOptions; let ind=index"> <input type="radio" [id]="option" name="children" [value]=option [(ngModel)]="this.children"> {{option}} </label> </div>

ngFor 中的引用变量不起作用

reference variable in ngFor not working

angular2-directives

ngfor