我在一个组件上有一个“输入”和“跨度”:
<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完成。但是我不明白如何从列表中选择项目,然后单击“选择”按钮在输入中显示此信息。