无法在Angular 10中自定义的第三方web组件中使用ngModel / *ngFor

Question

我正在使用一些abc第三方标签创建一个选择下拉列表。但UI中没有显示任何选项。看起来好像ngFor根本不起作用。

<p-is-abc-select mode="action" hide-on-scroll label="Airline Name">
<select [(ngModel)]="airlineSelected">
<option *ngFor="let airline of airLines" [value]="airline.name">
{{airline.name}} </option>
<option value="">"No airline"</option>
</select>
</p-is-abc-select>

在没有第三方标签名称的正常html中使用本机选择和选项时，上面的代码可以正常工作。

Answer 1

添加ngIf就可以了。在airLines数据被异步调用填充之前，下拉菜单被渲染。*ngIf首先等待数据，然后呈现带有选项的下拉菜单。

<p-is-abc-select ngIf="airLines.length>0" mode="action" hide-on-scroll label="Airline Name">
<select [(ngModel)]="airlineSelected">
<option *ngFor="let airline of airLines" [value]="airline.name">
{{airline.name}} </option>
<option value="">"No airline"</option>
</select>
</p-is-abc-select>