angular - 子组件内的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