6

我有像数组一样的数据点。所以我试图搜索数组中的值，但它在primeng中不起作用

在组件文件中，我有以下部分代码，

tableHeader = [
    { field: 'name', header: 'Name' },
    { field: 'skills', header: 'Skills' },
];

modelData = [
    { "label": "HTML", "value": "HTML" },
    { "label": "Css", "value": "Css" },
    { "label": "Angular", "value": "Angular" },
    { "label": "Python", "value": "Python" },
    { "label": "Perl", "value": "Perl" },
    { "label": "JS", "value": "JS" },
    { "label": "Java", "value": "Java" }
];

data = [
    {
        name:"User1",
        skills:["JS","Java","Angular"]
    },{
        name:"TestUser",
        skills:["HTML","Css"]
    },{
        name:"Root",
        skills:["HTML","Css","Angular","Python","Perl"]
    }
];

html是

<p-table #dt [value]="data">
    <ng-template pTemplate="header">
    <tr>
            <th>Name</th>
            <th>Skills</th>
    </tr>
    <tr>
        <th>
            <input pInputText type="text" (input)="dt.filter($event.target.value, 'name', 'contains')">
        </th>
        <th>
             <p-multiSelect [options]="modelData" (onChange)="dt.filter($event.value, 'skills', 'in')"></p-multiSelect>
        </th>
    </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData>
        <tr>
            <td>{{rowData['name']}}</td>
            <td>
                <span *ngFor="let skill of rowData.skills;">
                {{skill}}
                </span>
            </td>
        </tr>
    </ng-template>
<p-table>

我能够搜索该Name字段，但我无法搜索该Skills字段。因为它包含数组值。

堆栈闪电战

4

1 回答 1

3

解决问题以获得我尝试过的正确搜索结果，它对我有用。

尝试在 {{skill}} 字符串后添加逗号“，” 如果有任何混淆，请告诉我。

像这样：-

<p-table #dt [value]="data">
    <ng-template pTemplate="header">
    <tr>
            <th>Name</th>
            <th>Skills</th>
    </tr>
    <tr>
        <th>
            <input pInputText type="text" (input)="dt.filter($event.target.value, 'name', 'contains')">
        </th>
        <th>
            <input pInputText type="text" (input)="dt.filter($event.target.value, 'skills', 'contains')">
        </th>
    </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData>
        <tr>
            <td>{{rowData['name']}}</td>
            <td>
                <span *ngFor="let skill of rowData.skills;">{{skill}},</span>
            </td>
        </tr>
    </ng-template>
<p-table>
于 2019-05-11T09:39:58.163 回答