相关疑难解决方法(0)

当用户将鼠标悬停在列表项上时,我希望显示一个按钮.当用户离开列表项时,我希望不显示该按钮.

我遇到了一个mouseenter事件和一个mouseleave.

html的

<mat-list-item (mouseenter)="enter($event)" (mouseleave)="leave($event)" class="chat-message-body" *ngIf="auth._id !== message.author._id" fxLayoutAlign=""
    dir="ltl">
    <div matLine>
        <b>{{message.author.profile.username}} </b>
        <span>{{message.created_at | date:'shortTime'}} </span>
    </div>
    <button mat-icon-button>
        <mat-icon aria-label="">keyboard_arrow_down</mat-icon>
    </button>
    <span matLine> {{message.body}} </span>
    <img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
</mat-list-item>

.TS

enter(e) {
    console.log("enter");
}

leave(e) {
    console.log("leave");
}

除了声明这些功能之外,我不知道如何定位此列表项中的按钮以显示和隐藏它,具体取决于用户是否已输入列表项块或向左.

我正在尝试学习角度材料2,并#auto在自动完成中遇到了这个属性.我理解auto可以替换为任何文本,但为什么#之前需要一个这里auto有什么名称？

<md-input-container>
  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
               ^^^^ what is name of this property
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>