angular опция выбора по умолчанию не отображается - PullRequest
Новая
       7

angular опция выбора по умолчанию не отображается

0 голосов
/ 06 марта 2020

У меня есть эти выборки, и они не показывают вариант по умолчанию, они просто показывают пустой в начале. 

<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** с этим я получаю ошибку, не могу связать его, так как это неизвестное свойство.

Проблема как с обычным выбором, так и с динамикой c один тоже.

Я не уверен, что еще я мог сделать.

1 Ответ

0 голосов
/ 10 марта 2020

Ну, как @ConnorsFan упоминается в комментарии выше. Поскольку я связываю select с добавлением объекта, [ngValue]="undefined показывает значение по умолчанию, а для динамического c select назначение его неопределенным для onChange также отображает значение по умолчанию при изменении первого.

ц. 

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>
...