javascript - 模板引用变量 *ngFor

标签 javascript angular ionic2

<分区>

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')}

我想用一个按钮编辑我的输入,当它具有焦点时,例如,如果我输入一个单词并单击按钮,它应该添加“|”在我输入这个词之后。我不想将按钮放在 div 中,我想要一个按钮。

问题:如果我聚焦第二个输入并单击按钮,它会添加“|”到第一个输入而不是第二个,第三个输入相同。

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

最佳答案

由于您的代码会生成多个 ionic 输入元素,因此您可能应该使用“ViewChildren”和“QueryList”而不是单一的“ViewChild”。

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

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

 import { IonInputComponent } from './wherever'  

然后查询:

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

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

 this.inputs.toArray(); 

您应该能够阅读每个组件的属性。尽管从您的代码中不清楚您在使用 (ionFocus) bc 做什么,但我认为您可能在那里有打字错误/缺少引号。

编辑 - 我不确定你的 (ionFocus) 行应该做什么,但是如果你试图设置一个变量来指定哪个输入被聚焦。您可以只使用索引号。

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

然后

 (ionFocus)="myFocusVar = i"

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

关于javascript - 模板引用变量 *ngFor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45925917/

相关文章:

angular - 我应该将 @angular/compiler 保留在 dependencies 还是 devDependencies 中?

javascript - Ionic 2 Angular 2 - 如何通过 Action Sheet 刷新当前页面的数据?

javascript - ng2-translate 与 Charts.js 结合使用组件文件

javascript - 如何在ionic 2 angular 2中的点击事件中获取按钮的id和name值

javascript - 光标在输入标签中不起作用

javascript - Ionic 2 Facebook 登录 - 'App Not Setup' & 'Not Logged in' & 'Given URL is not allowed' 错误

javascript - 查找展开元素的父级并使用 jquery 在 .wrap() 中使用它

javascript - 显示/隐藏按钮的条件渲染 - ReactJs

延迟加载模块上的 Angular 子路由未加载

angular - 在angular2中动态更改 map 语言