Question

我正在做这样的事情，我在那里宣布选择器。

<div ngFor="let x of y;let i = index;">
    <input *ngIf="i === 0" #selector0 type="number" value="{{item.value}}">
    <input *ngIf="i === 1" #selector1 type="number" value="{{item.value}}">
</div>

有没有办法像下面这样做，我不需要重复自己？

 <input #selector{{i}} type="number" value="{{item.value}}">

 <button (click)="submit(selector0)">

我没有寻找替代方法，只是想知道动态选择器是否可行。

Answer 1

所以我们从这里开始，Angular将这些定义为“模板引用变量”：

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars

好的，让我们试着找到它的来源。

https://github.com/angular/angular/blob/master/modules/%40angular/compiler/src/template_parser/template_parser.ts#L34

https://github.com/angular/angular/blob/master/modules/%40angular/compiler/src/template_parser/template_parser.ts#L430

所以我们试图解析元素......让我们看看它是如何定义的：

https://github.com/angular/angular/blob/master/modules/%40angular/compiler/src/template_parser/template_parser.ts#L16

我要设一个断点，看看有什么事。

编辑：

我在“_parseAttr”函数中放置一个断点，以查看它在查看模板引用时看到的内容：

以下是查找绑定的调用：

var hasBinding = _this._parseAttr(isTemplateElement, attr, matchableAttrs, elementOrDirectiveProps, animationProps, events, elementOrDirectiveRefs, elementVars);

调试器输出的属性名称是什么：

attr = Attribute {name: "#testerno{{check}}", value: "", sourceSpan: ParseSourceSpan, valueSpan: undefined}

所以看起来没有解析属性名name: "#testerno{{check}}"以查看{{check}}是否是一个角度变量，它只是将其解释为字符串的一部分。

因此，你不能做你上面提到的。在这种情况下，它认为引用名称为"#testerno{{check}}"。

或者，在您的情况下，selector{{i}}。

请注意，这是有道理的，因为“＃”在编译器级别使用，并且不会出现在输出html中，因此无法动态创建该引用。

Answer 2

将其分配给数据属性，然后您可以使用javascript的querySelector。

<input attr.input="{{i}}" type="number" value="{{item.value}}">

Angular2重复选择器

2 个答案: