启动列表框复选框已选中或已选择选项

Question

我在Angular 7中使用了Primeng。在显示已选中的复选框时面临问题。

下面，我显示列表框，但未选中复选框。有人可以帮我吗？我想念什么？

我正在使用p-dialog下的p-listbox

<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]);
    }
}