1

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

而且除了动态引用的问题，还有@ViewChildor的@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'in@ViewChild是一个临时变量。html 代码中的引用用 表示#input。

4

0 回答 0