Question

我是Angular的新手，请帮帮我。我有一张进入目的地的表格。最小目的地数为1，没有最大限制。

订单组件:(父）

import { ViewChild, Component, OnInit, Input, NgZone } from '@angular/core';
import { DestinationsComponent } from '../destinations/destinations.component';

@Component({
  selector: 'order',
  templateUrl: './order.component.html'
})

addNextDestination(){
  this.nextDestinationId++;
  this.focusedDestination = (this.nextDestinationId + 1);
  let index = this.nextDestinationId;
  let nextDestinationArr = {
    'nextDestinationId': index,
    'nextDestinationLat': '',
    'nextDestinationLng': '',
  };
  this.nextDestinations[index] = nextDestinationArr;
}

地址模板：

<div *ngFor="let nextDestination of nextDestinations | slice:1; let $destNum=index;">
  <destinations #destComponent
    [destNum]="$destNum"
    [focusedDestination] = "focusedDestination"
    [nextDestination]="nextDestination"
    (postConfirmNextDestination)="confirmNextDestination($event)">
  </destinations>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <label (click)="addNextDestination()" style="color: blue; cursor: pointer; font-size: 18px;"><fa name="map-marker"></fa> Add Destination </label>
  </div>
</div>

目的地组成部分:(儿童）

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'destinations',
  templateUrl: './destinations.component.html'
})

export class DestinationsComponent{

  @Input() nextDestination: any[];
  @Input() destNum: number;
  @Input() focusedDestination: number;

  @Output() postConfirmNextDestination = new EventEmitter<string>();

  nextDestinationLat: any[] = {};
  nextDestinationLng: any[] = {};

  constructor(private _zone: NgZone) {
  }

  locateNextDestination(){

    this.nextDestination.nextDestinationLat = this.nextDestinationLat[this.focusedDestination];
    this.nextDestination.nextDestinationLng = this.nextDestinationLng[this.focusedDestination];

    //this.postConfirmNextDestination.next();
  }
}

目的地模板：

<div class="row box-body">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
    <label><fa name="map-marker"></fa>Destinatino Number: {{destNum}} </label>
  </div>

    <input type="text" name="nextDestinationLat{{destNum}}" [(ngModel)]="nextDestinationLat[destNum]" />
    <input type="text" name="nextDestinationLng{{destNum}}" [(ngModel)]="nextDestinationLng[destNum]" />

  </div>
</div>

问题：

我正在使用googlemaps api在地图上选择点作为目的地，我可以首次插入目的地模板的目的地详细信息。但我无法访问下一个动态添加的模板的输入。它就像根本没有检测到新的动态输入元素一样。请帮我解决这个问题。对不起我的英语不好。如果不是以上可以解释的话，我会解释更多。

动态创建的输入字段无法识别

0 个答案: