0

我创建了一个角度组件库，我通过 npm 将其安装到我的应用程序中。

我有一个下拉列表，可以很好地填充和使用……当我想“重置”组件库控件以进行新的选择时，问题就来了。
我不知道该怎么做？

这是我用于下拉控件的组件库 html..

  <select [(ngModel)]='thisControl' name="nameControl" id="idControl" 
      (ngModelChange)="updateControl(thisControl)" class="form-control">
      <option *ngFor="let control of controls" [value]="control.ControlID"> 
      {{control.controlName}} ({{control.ControlCode}})</option>
  </select>

这是我的组件代码...

import { Component, OnInit, Output, EventEmitter, Input } from 
'@angular/core';
import { msControlDataService } from '../../services/ms-control-data- 
service';

@Component({
  selector: 'ms-control-name-id-code',
  templateUrl: './control-name-id-code.component.html',
  styleUrls: ['./control-name-id-code.component.scss']
})
export class ControlNameIdCodeComponent implements OnInit {
  agencies: any;
  constructor(private msControlDataService:msControlDataService) { }

  ngOnInit() {
    this.getAgencies();
  }
  @Input() currYear: any;
  @Output() selectedValue = new EventEmitter<object>();
  getAgencies(){
    this.msControlDataService.getControlListAD(this.currYear)
    .subscribe((data) => {
      this.agencies = data;

    });
  }
  updateControl(control){    
    this.selectedValue.emit(control);
  }
  thisControl:string = "";

}

这是我在我的应用程序中的用法...

我将模块导入 app.module.ts 并将我的标签添加到 html...

 <ms-control-name-id-code [(currYear)]="currYear"  
(selectedValue)="setControl($event)" ></ms-control-name-id-code>

就像我说的那样，这一切都按预期工作，但是我似乎无法弄清楚如何在不进行整页刷新或获取控件的 ngModel 的情况下“重置”控件。

任何帮助是极大的赞赏！！

4

1 回答 1

0

所以我最终做的是使用@ViewChild 来访问我所有的组件属性和功能......

@ViewChild(ControlNameIdCodeComponent)
private resetDropDown: ControlNameIdCodeComponent;

然后我可以更改绑定到 ngModel 的值

this.resetDropDown.thisControl = "";
于 2018-10-29T13:18:33.737 回答