Флажки со списком основных параметров установлены или выбраны параметры

Question

Я использую Primeng с Angular 7. У меня проблема с отображением уже установленного флажка.

Ниже я показываю список, но флажки не отмечены. Кто-нибудь может мне помочь с этим? Чего мне не хватает?

Я использую p-listbox в p-диалоге

<p-dialog
    header="Assign Feature"
    [(visible)]="displayDialog"
    [responsive]="true"
    showEffect="fade"
    [modal]="true"
    [draggable]="true"
    [responsive]="true"
    [contentStyle]="{ 'max-height': '320px', 'max-width': '400px' }"
    [positionTop]="100"
>
    <p-listbox
        [options]="sourcelist"
        multiple="multiple"
        checkbox="checkbox"
        filter="filter"
        optionLabel="name"
        [(ngModel)]="selectedPermission"
        [listStyle]="{ 'max-height': '200px' }"
    ></p-listbox>

    <p>
        Selected Permissions:
        <span
            *ngFor="let c of selectedPermission"
            style="margin-right: 10px"
            >{{ c.name }}</span
        >
    </p>
</p-dialog>

Пожалуйста, обратитесь к скриншоту:

Answer 1

В выбранных элементах вы должны передать весь объект, а не одну строку, чтобы установить флажок.

html

<p-listbox
    [options]="sourcelist"
    multiple="multiple"
    checkbox="checkbox"
    filter="filter"
    optionLabel="name"
    [(ngModel)]="selectedPermission"
    [listStyle]="{ 'max-height': '200px' }"
    ></p-listbox>

{{selectedPermission | json}}

ts

export class AppComponent {
    sourcelist = [
        { name: 'Update', value: { id: 1, name: 'Uodate'} },
        { name: 'Delete', value: { id: 2, name: 'Delete'} },
        { name: 'Show', value: { id: 3, name: 'Show' } }
    ];

    selectedPermission = [];

    constructor() {
        this.selectedPermission.push(this.sourcelist[1]);
    }
}