通过 <mat-select> 将数据发送到表单

Question

我想在 Angular 中显示之前通过 <mat-select> 选择的 mat-table 用户角色。当我通过普通的<select> 执行此操作时，表格中会出现一个新条目，但菜单看起来很难看。

<label>Role</label>
<select id="Role">
  <option *ngFor="let element of config.roles" [value]="element.permission">
    {{element.name}}
    </option>
</select>

不幸的是，如果我改用<mat-select> 尝试，在我按“创建用户”后不会出现新条目。

<mat-form-field appearance="fill">
<mat-label>Role</mat-label>
<mat-select>
  <mat-option matInput id="Role" type="number" *ngFor="let element of config.roles" value="element.permission">
    {{element.name}}
  </mat-option>
</mat-select>
</mat-form-field>

提前致谢

Answer 1

假设您的界面结构如下：

interface Configuration {
  roles: Role[];
}

interface Role {
  name: string;
  permission: number;
}

interface User {
  id: number;
  username: string;
  email: string;
  role: Role;
}

这是我的逆向工程 :-) 组件代码：

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {
  ngOnInit(): void {
    this.users = [
      {
        id: 0,
        username: 'Vasya',
        email: 'vasya@vasya.com',
        role: this.config.roles.find((role) => role.permission == 0),
      },
      {
        id: 1,
        username: 'Jack',
        email: 'jack@jack.org',
        role: this.config.roles.find((role) => role.permission == 1),
      },
    ];
  }

  config: Configuration = {
    roles: [
      {
        name: 'CUSTOMER',
        permission: 0,
      },
      {
        name: 'WAITER',
        permission: 1,
      },
      {
        name: 'MANAGER',
        permission: 2,
      },
      {
        name: 'ADMIN',
        permission: 3,
      },
    ],
  };

  displayedColumns = ['user.id', 'user.username', 'user.email', 'user.idRole'];
  hide = true;

  users: User[];
  email: string;
  username: string;
  role: Role;
  userRoleId: number;

  getUserInput() {
    this.users.push({
      id: this.users[this.users.length - 1].id + 1,
      email: this.email,
      username: this.username,
      role: this.config.roles.find(
        (role) => role.permission == this.userRoleId
      ),
    });

    this.users = [...this.users];
  }
}

这里是模板代码（通过删除分页器和其他一些细节来简化）。

<form (ngSubmit)="getUserInput()">
    <mat-form-field appearance="fill">
        <mat-label>Username</mat-label>
        <input id="Username" matInput name="username" placeholder="Username" [(ngModel)]="username">
    </mat-form-field>
    <mat-form-field appearance="fill">
        <mat-label>Email</mat-label>
        <input id="Email" type="email" name="email" matInput placeholder="user@mail.com" [(ngModel)]="email">
        <mat-error>
            Please enter a valid email address
        </mat-error>
    </mat-form-field>


    <mat-form-field appearance="fill">
        <mat-label>Role</mat-label>
        <mat-select name="userRoleId" [(ngModel)]="userRoleId">
            <mat-option matInput id="Role" type="number" *ngFor="let element of config.roles"
                [value]="element.permission">
                {{element.name}}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field appearance="fill">
        <mat-label>Enter your password</mat-label>
        <input id="Password" matInput [type]="hide ? 'password' : 'text'" placeholder="password">
        <button type="button" mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
            [attr.aria-pressed]="hide">
            <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
        </button>
    </mat-form-field>

    <button mat-button type="submit"> Create user </button>

</form>

<div class="tableContainer">
    <table mat-table [dataSource]="users">

        <!-- id Column -->
        <ng-container matColumnDef="user.id">
            <th mat-header-cell *matHeaderCellDef> ID </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <!-- username Column -->
        <ng-container matColumnDef="user.username">
            <th mat-header-cell *matHeaderCellDef> Username </th>
            <td mat-cell *matCellDef="let element"> {{element.username}} </td>
        </ng-container>

        <!-- email Column -->
        <ng-container matColumnDef="user.email">
            <th mat-header-cell *matHeaderCellDef> Email </th>
            <td mat-cell *matCellDef="let element"> {{element.email}} </td>
        </ng-container>

        <ng-container matColumnDef="user.idRole">
            <th mat-header-cell *matHeaderCellDef> Role </th>
            <td mat-cell *matCellDef="let element">
                <span>{{element.role.name}}</span>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selected(row)"></tr>

    </table>
</div>

这个重做的代码对我有用。当然，不要忘记在 app.module 中导入所有必需的模块。