Question

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>

item.component.ts

@Component({
selector: 'item',
templateUrl: './item.component.html'
})
export class DetailComponent {
@ViewChild('input') myInput ;

items =["item1","item2","item3"]

editInput(){
let key = "|"
let v = this.myInput

if (this.myFocusVar== true){v.value += key} }

}
else {console.log('false')}

我想用一个按钮编辑我的输入，当它有焦点时，例如，如果我输入一个单词并单击按钮，它应该添加＆＃34; |＆＃34;在我输入之后。我更喜欢不把按钮放在div里面，我想要一个按钮。

问题：如果我关注第二个输入并单击按钮，它将添加＆＃34; |＆＃34;第一个输入而不是第二个输入，第三个输入相同。

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

Answer 1

由于您的代码生成多个离子输入元素，您应该使用'ViewChildren'和'QueryList'而不是单数'ViewChild'。

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

我不确定'ion-input'是否是它自己的组件。如果是，您也可以导入它并查询它。

 import { IonInputComponent } from './wherever'

然后查询：

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

如果您像这样查询它们，则不需要单独的模板引用变量。然后，您应该能够在ngAfterViewInit或更高版本中访问该列表。如果您需要将列表作为数组，则可以调用

 this.inputs.toArray();

您应该能够阅读每个组件的属性。虽然从你的代码中不清楚你在做什么（ionFocus），但我认为你可能在那里有一个拼写错误的引号。

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

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

然后

 (ionFocus)="myFocusVar = i"

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

模板参考变量* ngFor

1 个答案: