Angular Material 2 - 自动完成中的自定义mat-option / md-option模板

Question

Angular Material 2是否有一个选择器来为AngularJS自定义自动填充选项，例如Angular Material md-item-template？我在材料2的docs上找不到任何东西

docs中的AngularJS示例：

<md-autocomplete
    <md-item-template>
      <span class="item-title">
        <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
        <span> {{item.name}} </span>
      </span>
      <span class="item-metadata">
        <span class="item-metastat">
          <strong>{{item.watchers}}</strong> watchers
        </span>
        <span class="item-metastat">
          <strong>{{item.forks}}</strong> forks
        </span>
      </span>
    </md-item-template>
</md-autocomplete>

Answer 1

我也正在寻找正确的方法，就像好的材料1一样。 这是丑陋的黑客，我可以让它在材料5中工作：

风格：

.mat-option {
  height: 50px;
  line-height: 20px;
}

模板：

<mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
    <!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
        <span>{{ state.name }}</span><br>
        <small>Population: {{state.population}}</small>         
    </mat-option>
</mat-autocomplete>

试试here

Answer 2

两行mat-autocomplete with picture

的解决方案

Stackblitz running example

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="20" />
        <span>{{ state.name }}</span> <br>
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

// CSS
.mat-option {
  height: 50px;
  line-height: 20px;
}

Answer 3

这就是我在mat-autocomplete中拥有多行选项的方法。
对我来说，关键是将mat-option内容包装在div中并将显示设置为inline-block。
也许有人觉得它有用。

模板

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let item of filteredItems" [value]="item">
    <div class="multiline-option">
      {{ item.lineOne }} <br />
      {{ item.lineTwo }}
    </div>
  </mat-option>
</mat-autocomplete>

样式

.multiline-option {
  display: inline-block;
  line-height: normal;
}