Question

在模板user.component.html中，我使用了Primeng的组件

<p-multiSelect name="roles_id" [(ngModel)]="selectedRoles" [options]="user.roles"></p-multiSelect>

加载输入数据时，如何显示所选值

此代码在user.component.ts

中

export class UserComponent implements OnInit {

private selectedStores: string[];

constructor(private roleService: RoleService){

     this.roleService.getRoleList().subscribe(response=>{this.user.roles=response.body.data.map(function(value){
            return {label:value.name, value: value.id};
        });})

    this.selectedRoles=['1','2'];
}
ngOnInit() {
    this.user={
         roles: [],
    };
}
}

但是在接口multiselect show null，null，如果我点击多选所选的两个项目。如何显示标签而不是null，null？

Answer 1

您是否尝试在console.log中显示生成的user.roles，例如？

如果标签显示为null，则options对象出错。它必须是一个对象键/值的数组，以便您可以遍历它并显示在组件中。这是我在一个项目中的一个例子：

columns = [
  { value: 'id',         label: 'ID' },
  { value: 'comment',    label: 'Comments' },
  { value: 'updated_at', label: 'Last Update' },
  { value: 'enabled',    label: 'Enabled' }
];

显然，您正在为用户对象分配一个空数组，这可能会覆盖构造函数中的先前定义。构造函数在ngOnInit之前运行。您可以将user.roles初始化为空，并在ngOnInit（）中为其分配数据。

希望它有所帮助。

Answer 2

有趣的是，通过你的问题，我找到了解决方案。我的问题是创建一个数据表，并选择一行来显示已分配的用户角色。所以我会为你分解它。希望它可以帮助你弄清楚你的。

我的员工模特

export interface IStaff {
  staffId: number; 
  userRoles: string[];
}

选择角色

export class UserComponent implements OnInit {

   staff: IStaff;
   staffRoles: SelectItem[];
   selectedRoles: string[] = [];
   tempRoles: string[] = [];

   constructor(private roleService: RoleService){}

    ngOnInit() {

        this.roleService.getRoleList().subscribe(response=> {
           let tempRoles: IStaff[];
           this.staffRoles = [];

           tempRoles = response;

           tempRoles.foreach(el => {
             this.staffRoles.push({
                label: el.name, value: el.id
             });
          });
       });

       staff.userRoles.forEach(el => {
           let value: any = el;
           this.tempRoles.push(value.roleName);
           this.selectedRoles = this.tempRoles;         
       });

       // then set the tempRoles back to null to prevent readding the existing roles
      this.tempRoles = [];
    }

然后应该

<p-multiSelect name="roles_id" [(ngModel)]="selectedRoles" [options]="staffRoles"></p-multiSelect>

Answer 3

如果将primeng升级到版本^ 4.0.0，它将起作用

Angular2组件p-multiSelect Primeng

加载输入数据时，如何显示所选值

3 个答案: