不显示角度选择默认选项

Question

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

<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**，因为它是一个未知的属性，我收到了无法绑定它的错误。

问题在于正常选择和动态选择都存在。

我不确定我还能做什么。

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>