Question

我正在为应用程序的首页使用angular 6和angular材料，并且我有一个名为Roles的模块，该模块具有与之关联的权限的集合，在Roles页面上，我有一个编辑按钮，单击该按钮可以检索角色通过其ID进行识别，并且该角色具有与其相关联的权限的集合，如下图所示：，当我单击“编辑”按钮时，会出现一个弹出窗口，该弹出窗口是有角度的材质形式，其他字段，它具有以下字段：

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";

class Tabs extends Component {
  componentDidMount() {
    M.Tabs.init(this.Tabs);
  }
  render() {
    return (
      <>
        <ul
          ref={Tabs => {
            this.Tabs = Tabs;
          }}
          id="tabs-swipe-demo"
          class="tabs"
        >
          <li class="tab col s3">
            <a href="#test-swipe-1">Test 1</a>
          </li>
          <li class="tab col s3">
            <a href="#test-swipe-2">Test 2</a>
          </li>
          <li class="tab col s3">
            <a href="#test-swipe-3">Test 3</a>
          </li>
        </ul>

        <div id="test-swipe-1" class="col s12 blue">
          Test 1
        </div>
        <div id="test-swipe-2" class="col s12 red">
          Test 2
        </div>
        <div id="test-swipe-3" class="col s12 green">
          Test 3
        </div>
      </>
    );
  }
}

export default Tabs;

它期望<div> <mat-form-field class="form" floatPlaceholder="never" shouldPlaceholderFloat="false"> <mat-select [(ngModel)] = "data.permissions" [ngModelOptions]="{standalone: true}" multiple> <mat-option *ngFor="let permission of data.allPermissions" [value]="permission.name"> {{permission.name}} </mat-option> </mat-select> </mat-form-field> </div>数组应该在mat-select下拉列表中预先填充，因为我已将其与permissions绑定在一起，但是没有，正如您在第二张图片中看到的那样

。

任何帮助将不胜感激。谢谢！

Answer 1

您在寻找这个吗？

更改所需的内容

第一：

在HTML和TS代码中使用[compareWith]="compareFn"：

compareFn(c1,c2): boolean {
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

第二：

对于mat-option，将[value]设置为permission，例如：

[value]="permission"

HTML代码：

<div>
    <mat-form-field class="form" floatPlaceholder="never" shouldPlaceholderFloat="false">
        <mat-select [(ngModel)]="data.permissions" [ngModelOptions]="{standalone: true}" multiple [compareWith]="compareFn">
            <mat-option *ngFor="let permission of data.allPermissions" [value]="permission">
                {{permission.name}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>

Stackblitz

Answer 2

您将授予权限许可，选择一个选项时，您可以捕获一个事件，以从刚刚选择的项目名称获取ID。

 <div >
<mat-form-field class="form" floatPlaceholder="never" shouldPlaceholderFloat="false">
 <mat-select [(ngModel)] = "data.permissions" [ngModelOptions]="{standalone: true}" multiple>
   <mat-option *ngFor="let permission of data.permissions" [value]="permission.name">
     {{permission.name}}
   </mat-option>
 </mat-select>
</mat-form-field>


</div>

NgModel是所有权限的item.name。您对此放权限数组，如何显示？

垫材选择角材中的数据绑定不起作用

2 个答案: