javascript - 在Angular 8中使用相同的ngModel属性绑定多个文本框中的不同值

Question

我正在尝试创建一个时间选择器。当用户关注文本框时，选择器将被打开。现在，一个页面可能包含多个文本框，每个文本框都应该打开选择器。我面临的问题是，我从时间选择器中获取不同文本框的值，但是当绑定到 时ngModel，任何选定的值都会绑定到所有文本框。

让我告诉你我的方法：

组件.html

<input type="text" [(ngModel)]="pickerData" (focus)="initPicker($event)" id="f-1" /> 
<input type="text" [(ngModel)]="pickerData" (focus)="initPicker($event)" id="f-2" />
<div #timepicks></div> <!-- Here where the picker will be dynamically Injected -->

组件.ts

import { Component, OnInit, ViewChild, Output, EventEmitter, HostListener, ViewContainerRef, 
ComponentFactoryResolver } from '@angular/core';
import { TimepickComponent } from './timepick/timepick.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
   pickerData: any;
   @ViewChild('timepicks', {read: ViewContainerRef, static: false}) timepicks: ViewContainerRef;

   constructor(
     private _componentFactoryResolver: ComponentFactoryResolver
    ) {}

   ngOnInit() {

   }

   initPicker = (event) => {
     this.timepicks.clear();
     let pickerComponentFactory = 
     this._componentFactoryResolver.resolveComponentFactory(TimepickComponent);

     //Dynamically creating the ' TimepickComponent ' component
     let pickerComponentRef = this.timepicks.createComponent(pickerComponentFactory); 
     (<TimepickComponent>(pickerComponentRef.instance)).pickerId = event.target.id; // Passing id

     pickerComponentRef.instance.pickData.subscribe(res => {
      this.pickerData = res;
      pickerComponentRef.destroy();
    });
  }
}

时间选择组件.ts

  .....
  .....

  @Input() pickerId: any;
  @Output() pickData = new EventEmitter();

 .....
 .....

   setClose = () => {
     this.pickData.emit(this.valueHolder); // Emitting as output
   }

电流输出

截图 1

截图 2

可以看出，screen1 是根据文本框 id 打开的，但是在 screen2 中，当我选择并设置时，它会填充到另一个文本框中。理想情况下，从文本框中选择的选择器应该与该特定文本框绑定。

任何帮助，将不胜感激。

标签： javascriptangular

Answer 1

这里的问题是您使用相同的变量pickerData绑定两个输入框。因此，即使您更改其中任何一个，更改也将反映在这两个值上。由于您有两个文本框，因此您需要两个变量来存储它们的值，例如pickerData1和pickerData2。

在调用initPicker()时，您需要再传递一个参数，即日期选择器当前在哪个文本框中打开，并将日期存储在相应的变量中。

html代码

<input type="text" [(ngModel)]="pickerData1" (focus)="initPicker($event, 1)" id="f-1" /> 
<input type="text" [(ngModel)]="pickerData2" (focus)="initPicker($event, 2)" id="f-2" />

TS代码

initPicker = (event, index) => {
     this.timepicks.clear();
     let pickerComponentFactory = 
     this._componentFactoryResolver.resolveComponentFactory(TimepickComponent);

     //Dynamically creating the ' TimepickComponent ' component
     let pickerComponentRef = this.timepicks.createComponent(pickerComponentFactory); 
     (<TimepickComponent>(pickerComponentRef.instance)).pickerId = event.target.id; // Passing id

     pickerComponentRef.instance.pickData.subscribe(res => {
      if (index === 1)
          this.pickerData1 = res;
      elseif (index === 2)
          this.pickerData2 = res;
      pickerComponentRef.destroy();
    });