Question

这是非常简单的事我需要做的是将变量或其他东西传递给我的方法。 此代码的问题，当触发onPickupClock时，它会打开第一个组件，即<md-select name="price">而不是组件本身

我的问题是： 如何将其设置为打开组件本身<md-select name="clocktime">？

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 ：使用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 ：直接将模板引用传递给调用函数

将模板引用变量传递给click事件。

首先给你的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();
}

触发器从锚点中选择

1 个答案: