Javascript 模板引用变量*ngFor

item.component.html

 <div class = "col text-center" *ngFor="let item of items">
 <p> item :{{item}} </p>
 <ion-input type="text" #input (ionFocus)="myFocusVar #input>

 </div>
 <ion-button type="submit" (click)="editInput()"></button>

我想用一个按钮编辑我的输入，当它的焦点在上面时，例如，如果我输入一个单词并单击按钮，它应该在我输入的单词后添加“|”。我不想把按钮放在div里面，我想要一个按钮

问题：如果我聚焦第二个输入并单击按钮，它会将“|”添加到第一个输入，而不是第二个输入，第三个输入也是如此

---

你知道如何解决这个问题吗？或者一个简单的例子来帮助我理解

由于您的代码生成多个ion输入元素，您可能应该使用“ViewChildren”和“QueryList”，而不是单数的“ViewChild”

 import { Component, ViewChildren, QueryList } from '@angular/core'

我不确定“离子输入”是否是它自己的组件。如果是，您也可以导入它并查询它

 import { IonInputComponent } from './wherever'  

然后查询：

 @ViewChildren(IonInputComponent) inputs: QueryList<IonInputComponent>;

您应该能够读取每个组件的属性。虽然从你的代码中不清楚你在用（ionFocus）bc做什么，但我认为你可能有一个输入错误/缺少引号

编辑-我不确定您（ionFocus）行应该做什么，但如果您试图设置一个变量，指定哪些输入已经被聚焦。你可以只使用索引号

  *ngFor="let item of items; let i = index"

然后

 (ionFocus)="myFocusVar = i"

---

这样，当您关注其中一个输入时，myFocusVar将更改为其索引。然后，您可以使用该索引引用查询列表中的正确输入。

如果我的页面中有大量“离子输入”，我将如何导入正确的输入？？我假设它们都使用相同的组件，对吗？你只需要导入一次组件，当你查询它时，它会在页面上显示所有离子输入。你能澄清你的代码吗？我不知道这条线应该做什么。。。（ionFocus）=“myFocusVar#input”<---它应该是“myFocusVar=#input”吗？ionFocus显示我的输入是否被选中，或者注意如果被选中它将返回true，#input是一个局部变量，我使用它将一个元素添加到一个特定的输入，它是我输入的一个引用，我不知道我是否可以设置一个全局变量来覆盖我的所有元素，，如果我的代码不清楚，很抱歉，但我选择了一个简单的示例来说明我的问题。是的，但每个模板引用变量都必须是唯一的。您正在为循环中的三个输入中的每一个分配相同的输入，因此只访问第一个输入。

  *ngFor="let item of items; let i = index"

 (ionFocus)="myFocusVar = i"