觸發器從選擇錨點

Question

這是非常簡單的事情，我需要做的是將一個變量或其他東西傳遞給我的方法。 這段代碼的問題是當onPickupClock被觸發，打開第一個組件，即<md-select name="price">，而不是組件本身

我的問題是： 我怎樣才能將其設置爲打開組件本身，<md-select name="clocktime">？

這是angular material select doc，如果你想看看

home.component.ts

import { MdSelect } from '@angular/material'; 

@Component({ 
.... 
}) 

export class HomeComponent { 

    @ViewChild(MdSelect) dp: MdSelect; 

    onPickupClock(e) { 
    this.dp.toggle(e); 
    } 
} 

home.component.html

<md-select [(ngModel)]="selectedPrice" floatPlaceholder="never" name="price"> 
    <md-option *ngFor="let price of prices" [value]="price.value"> 
    {{price.viewValue}} 
    </md-option> 
</md-select> 
... 
<div> 
<a (click)="onPickupClock()"> 
    <img src="/assets/home/xxx.png"> 
</a> 
</div> 

<md-select [(ngModel)]="selectedClockPickup" floatPlaceholder="never" name="clocktime"> 

    <md-option *ngFor="let clocktime of clocktimes [value]="clocktime.value"> 
    {{clocktime.viewValue}} 
    </md-option> 

</md-select> 

Answer 1

選項＃ 1：U SE ViewChild性能

與模板引用變量

<md-select #priceSelect> 
</md-select> 

<md-select #clockTimeSelect> 
</md-select> 

更新home.component.ts定義你的選擇和創建組件上的兩個ViewChild屬性。

@ViewChild('priceSelect') priceSelect: MdSelect; 
    @ViewChild('clockTimeSelect') clockTimeSelect: MdSelect; 

注意ViewChild裝飾器的選擇器是模板中使用的模板引用變量。這使您可以直接訪問組件。

onPickupClock() { 
    this.clockTimeSelect.toggle(); 
    } 

選項＃2：通參考模板直接調用函數

傳遞模板參考變量點擊事件。

首先給你的md-select本地模板變量的名字，叫做#clockTimeSelect

<md-select #clockTimeSelect [(ngModel)]="selectedClockPickup" floatPlaceholder="never" name="clocktime"> 
    <md-option *ngFor="let clocktime of clocktimes [value]="clocktime.value"> 
    {{clocktime.viewValue}} 
    </md-option> 
</md-select> 

然後更新您的點擊通過模板引用變量。

<a (click)="onPickupClock(clockTimeSelect)"> 
    <img src="/assets/home/xxx.png"> 
</a> 

更新組件功能接收MdSelect

onPickupClock(mdSelect: MdSelect) { 
    mdSelect.toggle(); 
}