绑定到子组件事件

时间:2018-07-20 04:29:31

标签: angular typescript

我在一个组件上有一个“输入”和“跨度”:

<div class="form-group form-black">
 <div class="input-group">
   <input type="text" class="form-control" id="l_country_id" #l_country_id='ngModel' name="l_country_id" [(ngModel)]="user.l_country_id" required>  
   <span type="submit" class="input-group-addon btn btn-info" (click)="onOpenModule();">Select Country</span>
 </div>
</div>

单击“ span”将打开一个模态窗口,其中包含所有国家/地区的列表。通过单击模态窗口底部列表中的国家之一,一次取消锁定“选择”按钮。这样便可以正常工作,因此在按下“选择”按钮后,先前选择的国家/地区应出现在“输入”中。

这是模态窗口代码:

modal.html:

<div class="card">
  <div class="row">
    <div class="card-content table-responsive">
      <div class="col-md-12">
          <table class=" table table-hover">
            <thead>
              <tr>
                <th >Country</th>
              </tr>
            </thead>
            <tbody>
              <tr  class="{{selectedCountry == country ? 'active' : ''}}" *ngFor="let country of countries" (click)="updateSelectedCountry(country?.country_id)">
                <td>{{country.name}} </td>
              </tr>
            </tbody>
          </table>
      </div>
      <div class="col-md-12">
          <button type="submit" (click)="cancel();">Close</button>
          <button type="submit" [disabled]="!selectedCountry?.name" (click)="onClick()">Select</button>
      </div>
    </div>
  </div>
</div>

modal.ts:

...

export class CountryModalComponent  implements ModalComponent<any> {


  countries: Array<Country>;
  selectedCountry = null;

  constructor(
    public dialog: DialogRef<any>,
    public authTokenService: Angular2TokenService, 
    private servCountry: CountryService
  ) { 
    this.countries = new Array<Country>();
  }

  ngOnInit() {
    this.loadCountries();
  }

  private loadCountries() {
    this.servCountry.getCountries().subscribe(countries => this.countries = countries);
  }

  cancel(): void {
    this.dialog.close(null);
  }


  updateSelectedCountry(CountryId) {
    this.selectedCountry = this.countries.find(el => {
      return el.country_id === CountryId
    })
  }

}

我知道可以使用@Output完成。但是我不明白如何从列表中选择项目,然后单击“选择”按钮在输入中显示此信息。

0 个答案:

没有答案