子組件內部的Angular2標簽輸入無法提交所有選定的標簽

Question

我有一個主要組件，在內部使用了另一個具有tag-input下拉列表的組件，但是當我提交表單tag-input所選項目未正確提交，僅張貼了最后一個所選項目的一個字符。

main component:

<div class="container">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <form #myForm="ngForm" novalidate>
        <nationality name="nationalities" ngModel ngDefaultControl></nationality>
        <button type="button" (click)="create(myForm)" class="btn btn-primary">Submit</button>
     </form>
   </div>
  </div>
</div>

在其組件類中，我有一個名為create的函數，該函數正常工作。 現在以下是nationality組成部分：

import { Component, Input } from '@angular/core';
import { Http } from '@angular/http';
import { NgForm, ControlValueAccessor } from '@angular/forms';

@Component({
   selector: 'nationality',
   template: `
      <label class="form-control-label" for="nationalities">Nationality</label>
      <tag-input ngModel id="nationalities" name="nationalities" [placeholder]="'Enter nationality'" [secondaryPlaceholder]="'Search in nationality list'" [onlyFromAutocomplete]="true">
        <tag-input-dropdown [autocompleteItems]="nationalities">
        </tag-input-dropdown>
      </tag-input>
   `
})

export class NationalityComponent {
  private tempNationalities;
  private nationalities = [];
  @Input() job;
  constructor(private _http: Http) {
    this._http.get('/api/nationalities')
    .subscribe((res)=>{
      this.tempNationalities = res.json();
      for (let k in this.tempNationalities) {
        this.nationalities.push(this.tempNationalities[k]['name_en']);
      }
   });
 }
}

Answer 1

嘗試下面的代碼。

<select id="nationalities" name="nationalities" [placeholder]="'Enter nationality'" name="nationalities" [secondaryPlaceholder]="'Search in nationality list'" [onlyFromAutocomplete]="true"[(ngModel)]="selectedValue">
           <option *ngFor="let nation of nationalities">{{nation}}</option>
</select>

要么

<tag-input [(ngModel)]="selectedValue" id="nationalities" name="nationalities" [placeholder]="'Enter nationality'" [secondaryPlaceholder]="'Search in nationality list'" [onlyFromAutocomplete]="true">
    <tag-input-dropdown [autocompleteItems]="nationalities">
    </tag-input-dropdown>

現在在您的打字稿類中訪問selectedValue