Я загрузил список в свой список выбора. Как установить выбранное значение в моем списке выбора после загрузки?
Ниже мой html-код
<div class = "col-md">
<div class = "form-group">
<label>Sub Issue Listbox</label>
<mat-selection-list
#IssueList
style = "max-height: 250px; overflow: auto"
formControlName = "issueId">
<mat-list-option
*ngFor = "let item of subIssueList"
[value] = "item.issueId">
{{ item.issueDesc }}
</mat-list-option>
</mat-selection-list>
<p>
Options Selected:
{{ IssueList.selectedOptions.selected.length }}
</p>
<button
(click) = "updateOqcReject()"
mat-raised-button
color = "accent">
Update Issue
</button>
</div>
</div>
Что касается моего загруженного списка, это массив.
Что касается моего выбранного списка, это массив.
Оцените, если кто-то там может указать мне, как я могу действовать по этому вопросу.
Вы должны установить значение вашего элемента управления с помощью метода setValue
и отправить issueId
В методе после загрузки списка вы должны вызвать его.
Пример:
this.form.get('issueId').setValue(selectedValue);
Где selectedValue
— это идентификатор задачи, которую вы хотите выбрать.
Вы можете запросить MatSelectionList
и использовать [selected]
ввод mat-selection-list
@Component({
selector: 'list-selection-example',
styleUrls: ['list-selection-example.css'],
templateUrl: 'list-selection-example.html',
})
export class ListSelectionExample {
typesOfShoes: any[] = [{id: 0, title: 'Boots'}, {id: 1, title: 'Clogs'}, {id: 2, title: 'Loafers'}, {id: 3, title: 'Moccasins'}, {id: 4, title: 'Sneakers'}];
@ViewChild(MatSelectionList) list: MatSelectionList;
ngAfterViewInit() {
const mySelections = [{id: 1, title: 'Boots'}]
/* Select your selections into MatSelectionList */
mySelections.map((s) => this.list.selectedOptions.select(s.id as any))
}
}
и в хтмл
<mat-selection-list #shoes>
<mat-list-option
[selected] = "shoes.selectedOptions.isSelected(shoe.id)"
[value] = "shoe.id"
*ngFor = "let shoe of typesOfShoes"
>
{{shoe.title}}
</mat-list-option>
</mat-selection-list>
<p>Options selected: {{shoes.selectedOptions.selected.length}}</p>
вы можете проверить это в Stackblitz