angular - 如何在 mat-option 中使用 mat-grid 或网格列表而不是使用 css 显示网格

Question

我在 mat-option 的两个不同行中都显示了 name 和 id，我display:grid在 mat-option-list css 中使用，而不是我想使用 mat-grid 或 grid-list 属性将它们显示为网格。

<input matInput class="form-control input" [(ngModel)]="userTextvalue"matAutocomplete]="auto">
  <mat-autocomplete class="user-autocomplete" #auto="matAutocomplete">
    <mat-option-list *ngFor="let user of filteredUsers" [value]="user.name">
        <span class="username">{{user.name}}</span>
        <span class="usercode">{{user.code}}</span>
      </mat-option>
  </mat-autocomplete>

scss：

.mat-option-text {
  line-height: normal;
  display: grid;
}

[

标签： angularangular-materialangular8

Answer 1

你为什么不把所有东西都包在一个包装器里？

   <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        <div class="wrapper">
          <span>{{option}}</span>
          <span>{{option}}</span>
        </div>
      </mat-option>
    </mat-autocomplete>

你的 .css 在哪里

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

见stackblitz