Angular of-select: GroupBy array of-select

Question

嗨，我的 ng-select 有问题，在这种情况下，storeTypes 是一个数组，如果 storeTypeswould 是一个字符串，那么功能就很完美，但我需要这个变量是一个字符串[] .我能做什么？

@Component({
    selector: 'my-app',
    template: `
             
        <label>Grouping</label>
        <ng-select [items]="accounts"
                bindLabel="label"
                bindValue="code"
                groupBy="storeTypes[0]"
                [(ngModel)]="selectedAccount">
        </ng-select>
        `
})
export class AppComponent {

    selectedAccount = '9'
    accounts = [
        {code: "9", checked: false, label: "Adidas", storeTypes:["Store"]},
        {code: "91", checked: false, label: "Nike", storeTypes:["Store"]},
        {code: "92", checked: false, label: "5guys", storeTypes:["Restaurant"]},
        {code: "93", checked: false, label: "McDonal", storeTypes:["Restaurant"]},
        {code: "94", checked: false, label: "FastFood", storeTypes:["Restaurant"]}
   ];
   
    constructor() {
    }
    
}

现在我看到原始的： enter image description here

我需要这个： enter image description here

Answer 1

一个问题是 groupby 应该是 [groupby]。其次，您应该创建一个辅助函数来分组，因为 groupby 将采用属性名称或函数。

试试下面的方法：

@Component({
    selector: 'my-app',
    template: `
             
        <label>Grouping</label>
        <ng-select [items]="accounts"
                bindLabel="label"
                bindValue="code"
                [groupBy]="groupingHelper"
                [(ngModel)]="selectedAccount">
        </ng-select>
        `
})
export class AppComponent {

    groupingHelper(item){return item.storeTypes[0]}
    selectedAccount = '9'
    accounts = [
        {code: "9", checked: false, label: "Adidas", storeTypes:["Store"]},
        {code: "91", checked: false, label: "Nike", storeTypes:["Store"]},
        {code: "92", checked: false, label: "5guys", storeTypes:["Restaurant"]},
        {code: "93", checked: false, label: "McDonal", storeTypes:["Restaurant"]},
        {code: "94", checked: false, label: "FastFood", storeTypes:["Restaurant"]}
   ];
   
    constructor() {
    }
    
}

Angular of-select: GroupBy array of-select

Angular ng-select: GroupBy array ng-select

angular-ngselect

angular