angular select 默认选项不显示

Question

我有这些 select，它们没有显示默认选项，只是在开头显示为空。

<label>Review Type</label>
    <select clrSelect name="reviewerTypes" (change)="onChange(currentReviewerType)" 
      [(ngModel)]="currentReviewerType">
        <option value="" selected disabled hidden>
            Choose value
        </option>
        <option *ngFor="let reviewType of reviewerTypes" [(ngValue)]="reviewType">
            {{reviewType.reviewType}}
        </option>
</select>
<label>Reviewer</label>
<select clrSelect name="options" [(ngModel)]="currentReviewer">
    <option value="" selected disabled hidden>Choose value</option>
    <option *ngFor="let reviewer of reviewers" [(ngValue)]="reviewer">
        {{reviewer.user}}
    </option>
</select>

ts 文件：

reviewerTypes: [] = [];
reviewers: [] = [];
reviewersAdded: any[] = [];
currentReviewer;
currentReviewerType;
defaultType = {id:0, reviewType:"Choose Value"};
defaultReviewer = {userId:0,user:"Choose Value"};;

constructor(private dataService: DataServicesService) { }
ngOnInit() {
    this.dataService.GetReviewerTypes().subscribe( response => this.reviewerTypes = response, error 
        => console.log(error));
    this.currentReviewer = this.defaultType;////i tried to add a default object, didn't work
    this.currentReviewer = this.defaultReviewer;
}

onChange(selection){
    let reviewerId = selection;
    this.dataService.GetReviewersByType(reviewerId.id).subscribe( (response)=> {
      this.reviewers = response
      this.currentReviewer = this.defaultReviewer;
    }, 
    error => console.log(error));
}

我已经用这个尝试了 [ngValue]="null"、[selected]="true" 和 **[ngValue]="null" disabled** 我收到无法绑定它的错误，因为它是未知的属性。

正常 select 和动态

都有问题。

我不确定我还能做什么。

Answer 1

正如@ConnorsFan 在上面的评论中提到的那样。由于我将 select 与对象绑定，因此添加 [ngValue]="undefined 显示了默认值，并且对于动态 select 在 onChange 上分配它未定义时也会显示默认值第一个变了。

ts.

onChange(selection){
    let reviewerId = selection;
    this.dataService.GetReviewersByType(reviewerId.id).subscribe( (response)=> {
      this.reviewers = response
      this.currentReviewer = undefined;////////////Assign undefined
    }, 
    error => console.log(error));
}

Html.

<select clrSelect name="reviewerTypes" (change)="onChange(currentReviewerType)" 
[(ngModel)]="currentReviewerType">
    <option [ngValue]="undefined" selected disabled>
        Choose value
    </option>
    <option *ngFor="let reviewType of reviewerTypes" [(ngValue)]="reviewType">
        {{reviewType.reviewType}}
    </option>
</select>

<select clrSelect name="options" [(ngModel)]="currentReviewer" >
    <option [ngValue]="undefined" selected disabled hidden>Choose value</option>
    <option *ngFor="let reviewer of reviewers" [(ngValue)]="reviewer">
        {{reviewer.user}}
    </option>
</select>

angular select 默认选项不显示

angular select defualt option not displaying

angular

select

default-value