Угловой материал - matIcon в MatSelect

Question

Я использую этот угловой материал select в моем приложении Angular 5:

<mat-form-field style="width:88%;">
    <mat-select placeholder="Contact *" formControlName="contact">
       <mat-option *ngFor="let contact of contacts" [value]="contact">
         <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
       </mat-option>
    </mat-select>
</mat-form-field>

на панели выбора <mat-icon>s перечислены, как и ожидалось, но если я выберу одну опцию, то home будет указан в <mat-form-field>Мой вопрос сейчас будет, как также просмотреть значок дома в <mat-form-field>

Answer 1

Это можно сделать с помощью опции "mat-select-trigger". Документацию по "коврик-коврик" можно найти здесь.

https://material.angular.io/components/select/api

Ниже должен быть рабочий пример того, что вы пытаетесь сделать. На основании того, что вы предоставили.

<mat-form-field style="width:88%;">
  <mat-select placeholder="Contact *" formControlName="contact">
    <mat-select-trigger>
      <mat-icon>home</mat-icon>&nbsp;{{contact.institution}}
    </mat-select-trigger>
    <mat-option *ngFor="let contact of contacts" [value]="contact">
      <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
    </mat-option>
  </mat-select>
</mat-form-field>

И применять стили по мере необходимости.

Answer 2

Вы можете добавить matPrefix в поле формы:

<mat-form-field style="width:88%;">

    <span matPrefix style="margin-right: 8px;"><mat-icon>home</mat-icon></span>

    <mat-select placeholder="Contact *" formControlName="contact">
       <mat-option *ngFor="let contact of contacts" [value]="contact">
         <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
       </mat-option>
    </mat-select>

</mat-form-field>

Если значок является свойством каждого контакта, например, contact.icon тогда вам нужно будет проделать немного больше работы, чтобы связать свойство значка выбранного в данный момент контакта с именем значка mat:

<mat-form-field style="width:88%;">

    <span *ngIf="select.value" matPrefix style="margin-right: 8px;"><mat-icon>{{select.value.icon}}</mat-icon></span>

    <mat-select #select placeholder="Contact *" formControlName="contact">
       <mat-option *ngFor="let contact of contacts" [value]="contact">
         <mat-icon [ngStyle]="{'color': contact.color}">home</mat-icon>{{contact.institution}} 
       </mat-option>
    </mat-select>

</mat-form-field>

Answer 3

Простое использование углового matPreix или matSuffixдиректива. ознакомьтесь с приведенным ниже фрагментом.

<mat-form-field>
    <mat-icon matPrefix>mic</mat-icon>
    <mat-select>
        <mat-option *ngFor="let food of foods" [value]="food.value">
            {{food.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

Результат:

ht tps://stackru.com/image s/8f828cc2144f2f7b8b801ed186bc4458d395aff2.png

Answer 4

Вы можете добавить условия внутри mat-select-trigger, используя:

        <mat-select matInput formControlName="status" placeholder="select status" required>
              <mat-select-trigger>
                          <ng-container [ngTemplateOutlet]="icons" [ngTemplateOutletContext]="{data:formControls.status.value}"></ng-container>
              </mat-select-trigger>

              <mat-option *ngFor="let currStatus of data.status" [value]="currStatus ">
                           <ng-container [ngTemplateOutlet]="icons" [ngTemplateOutletContext]="{data: currStatus}"></ng-container>
              </mat-option>
  </mat-select>

чтобы избежать дублирования кода, вы можете установить раздел mat-icon в шаблоне

      
<ng-template #icons let-data="data">
             <mat-icon *ngIf="data.key === taskStatus.WAITING">hourglass_empty</mat-icon>
             <mat-icon *ngIf="data.key === taskStatus.IN_PROGRESS">autorenew</mat-icon>
             <mat-icon *ngIf="data.key === taskStatus.COMPLETED">done</mat-icon>
             {{data.value}}
</ng-template>

в файле ts:

        public get formControls() { return this.createTaskForm.controls; }

Answer 5

У меня была такая же проблема, и я исправил ее, подписавшись на поле контакта реактивной формы, а затем обновив значение вашего объекта вот как.

Мой шаблон

<mat-form-field appearance="fill">
  <mat-label>Avatar</mat-label>
  <mat-select formControlName="avatar">
    <mat-select-trigger>
      <mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{user.avatar}}
    </mat-select-trigger>
    <mat-option *ngFor="let avatar of avatars" [value]="avatar">
      <mat-icon svgIcon="{{avatar}}"></mat-icon>{{avatar}}
    </mat-option>
  </mat-select>
</mat-form-field>

Мой код TS

this.contactForm.get('avatar').valueChanges.subscribe((value) => {
  this.user.avatar = value;
});

и, как вы заметили, я обновляю user объект с выбранным значением, затем

<mat-icon svgIcon="{{user.avatar}}"></mat-icon> 

будет обновлен выбранным аватаром.

Answer 6

В моем случае я решаю это так. Нет подписки или ссылки на шаблон. Просто добавьте, чтобы переопределить отображаемую метку и использовать те же функции.

Надеюсь, поможет !

            <mat-form-field appearance="fill">
        <mat-label>Select a state</mat-label>
        <mat-select [(value)]="lifecycleValue">
          <mat-select-trigger>
            <mat-icon matSuffix>{{ getLifecycleStateIcon(lifecycleValue) }}</mat-icon>&nbsp;&nbsp; {{lifecycleValue}}
          </mat-select-trigger>
          <mat-option *ngFor="let state of lifecycleStates"
            [value]="state">
            <mat-icon matSuffix>{{ getLifecycleStateIcon(state) }}</mat-icon> {{ state }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      export class DatasetShardEditDialogComponent implements OnInit {
  lifecycleStates: string[] = Object.values(LifecycleState);
  lifecycleValue: LifecycleState;
  ...
  getLifecycleStateIcon(state: LifecycleState): string {
    switch (state) {
      case LifecycleState.Archived: {
        return 'cloud_done';
      }
      case LifecycleState.Error: {
        return 'error';
      }
      case LifecycleState.NoArchive: {
        return 'cloud_off';
      }
      case LifecycleState.NotArchived: {
        return 'cloud_queue';
      }
      case LifecycleState.Unknown: {
        return 'help';
      }
      case LifecycleState.Archiving: {
        return 'cloud_upload';
      }
      default: {
        return '';
      }
    }
  }