Question

我的目标是创建一些按钮，将某些输入放在焦点上.setFocus()。问题是这些输入是由用户动态创建的。用户选择页面中将有多少输入，因此我无法静态引用输入。

除了动态引用的问题外，还有@ViewChild或@ViewChildren问题，因为我们无法动态使用它们。这也是一个需要解决的问题。我尝试使用ViewContainerRef但没有成功。

我已经研究了很多，但我找不到任何可以解决我问题的方法。这是我关于Stack Overflow的第一篇文章所以，如果我不够具体或者我提供的代码不够，请告诉我。

代码如下：

home.ts：

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

//Providers
import { UserDataProvider, DataList } from '../../providers/user-data/user-data';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  Inputs:number[];
  rowCount:number;
  homeData: DataList;
  titulo: string;
  unidade: string = 'mL/min';
  inputNumber: string = 'input';

  @ViewChild('input') NBicoInput;

  constructor(
    public navCtrl: NavController,
    public userData: UserDataProvider,
  ) {

  }

  setFocus(index){
    this.inputNumber = 'input'+index;
    this.NBicoInput.setFocus();
  }
}

以及与home.html有关的部分：

          <ion-row *ngFor="let y of rowCount|times" text-center align-items-center>
          <ion-col align-self-center col-2>{{y}}</ion-col>
          <ion-col text-center align-self-center col-4><ion-input #input></ion-input></ion-col>
          <ion-col align-self-center col-4></ion-col>
          <ion-col class="empty-col" align-self-center col-2><button id= '{{y}}' (click)="setFocus(y)" ion-button small icon-only>
            <ion-icon name="brush"></ion-icon></button></ion-col>
      </ion-row>

简而言之，我想做的就好像'input'中的@ViewChild是一个临时变量。 html代码中的引用由#input表示。

有没有办法动态引用输入？

0 个答案: