将同一事件发送到 Angular 2 打字稿中相应按钮单击的两个不同功能

Question

我有一个服务，可以在组件中的两个不同变量中获取我订阅的JSON数据。我有两个下拉列表，每个下拉列表都使用一个变量来过滤数据。 然后，我将这些数据发送到另一组按钮数组或列表。每个下拉列表应独立运行。

<div class="TSO-ddl" >
<md-select [(ngModel)]="selectedISO" (ngModelChange)="onSelect($event,selectedISO)" placeholder="TSO"  >
<md-option  value="Charge Only"  > Charge Only </md-option>
<md-option  value="PJM"  >PJM  </md-option>
<md-option  value="Not in ISO Market"  > Not in ISO Market </md-option>
<md-option  value="UCSD"  > UCSD </md-option>
<md-option  value="Any" > Any </md-option>
</md-select>
</div>
<div class="Status-ddl">
<md-select [(ngModel)]="selectedStatus" (ngModelChange)="onSelect($event,selectedStatus)" placeholder="Status" >
<md-option  value="NC"  >  Not Connected </md-option>
<md-option  value="GI"  > Active  </md-option>
<md-option  value="SLP"  >  Sleeping </md-option>
<md-option  value="IA"  > Inactive  </md-option>
<md-option  value="Any"  > Any  </md-option>
</md-select>
</div>
<md-list-item class="ui-primary-selector"> 
<div>  
<label  class="labeltag"> View </label>
<button md-button  *ngFor="let view of viewButtons "  [ngClass]="{'selected-item' :view === selectedView}" type="button" (click)="onClickView(selecctedISO,view); onClickView2(selectedStatus,view)">
{{view.Name}} </button>
</div>
</md-list-item>

TS 文件

constructor(private vehicleService: VehicleService) {
this.isoArray = [];
this.statusArray = [];
this.isoToShow = this.isoArray;
this.statusToShow = this.statusArray;
}
ngOnInit() {
this.vehicleService.getIVS()
.subscribe(isoArray => {
this.isoArray = isoArray;
this.isoToDisplay();
},
error => this.errorMessage = <any>error);
this.vehicleService.getIVS()
.subscribe(statusArray => {
this.statusArray = statusArray;
this.statusDisplay();
},
error => this.errorMessage = <any>error);
}

viewButtons: IButton[] = [
{ Id: 1, Name: 'Array' },
{ Id: 2, Name: 'List' }
];
onSelect(val, button: IButton) {
if (val = "Charge Only" || "PJM" || "USCD" || "Not in ISO Market" || "Any") {
this.selectedISO = val;
this.onClickView(val, button)
}
else if (val = "NC" || "GI" || "SLP" || "IA") {
this.selectedStatus = val;
this.onClickView2(val, button);
}
console.log(val);
}
onClickView2(val, button: IButton) {
this.selectedView = button;
if (button.Id == 1) {
val = this.selectedStatus;
console.log(val);
if (val === "Any")
{ this.statusToShow = this.statusArray; }
else
{ this.statusToShow = this.statusArray.filter(resource => resource.primary_status === val); }

//displays an array
}
else if (button.Id == 2) {
val = this.selectedStatus;
if (val === "Any")
{ this.statusToShow = this.statusArray; }
else
{ this.statusToShow = this.statusArray.filter(resource => resource.primary_status === val); }
}
//displays a list
}
onClickView(val, button: IButton) {
this.selectedView = button;
if (button.Id == 1) {
val = this.selectedStatus;
console.log(val);
if (val === "Any")
{ this.isoToShow = this.isoArray; }
else
{ this.isoToShow = this.isoArray.filter(resource => resource.iso_id === val); }
//displays an array
}
else if (button.Id == 2) {
val = this.selectedStatus;
if (val === "Any")
{ this.isoToShow = this.isoArray; }
else
{ this.isoToShow = this.isoArray.filter(resource => resource.iso_id === val); }
}
//displays a list
}

我的问题是下拉列表中的事件只发送到其中一个函数，而另一个函数获得空值。 每当有相应的值时，我如何从 onSelect(( 将数据发送到两个函数。

Answer 1

从第一个函数调用第二个函数，并传递所需的事件或其他参数：

onSelect(val, button: IButton) {
onSelect2(val, button);
//do something
}
onSelect2(val, button: IButton) {
//do something
}

编辑

要使用在 md-select 上选择的值过滤数据集以显示，请执行以下操作：

.HTML

<div class="TSO-ddl" >
<md-select (change)="onSelect($event)" placeholder="TSO"  >
<md-option  value="Charge Only"  > Charge Only </md-option>
<md-option  value="PJM"  >PJM  </md-option>
<md-option  value="Not in ISO Market"  > Not in ISO Market </md-option>
<md-option  value="UCSD"  > UCSD </md-option>
<md-option  value="Any" > Any </md-option>
</md-select>
</div>

元件

const data =[
{ iso_id: 'Charge Only',  name: 'Zero', status="NC" },
{ iso_id: 'Charge Only', name: 'Mr. Nice', status="NC" },
{ iso_id: 'PJM', name: 'Narco', status="IA" },
{ iso_id: 'PJM', name: 'Bombasto', status="IA" },
{ iso_id: 'PJM', name: 'Celeritas' , status="NC"},
{ iso_id: 'Not in ISO Market', name: 'Magneta', status="GI" },
{ iso_id: 'Not in ISO Market', name: 'RubberMan', status="SLP" },
{ iso_id: 'Not in ISO Market', name: 'Dynama' , status="GI"},
{ iso_id: 'UCSD', name: 'Dr IQ' , status="NC"},
{ iso_id: 'UCSD', name: 'Magma' , status="SLP"},
{ iso_id: 'UCSD', name: 'Tornado' , status="NC"}
];
displayList = Array<any>;
onSelect(val){
if (val.value === 'Any'){
this.displayList = this.data.slice();
}else {
this.displayList = this.data.filter(data => data.iso_id === val.value);
}
}

基本上，在(更改(事件上，我们调用传递事件的方法，然后我们读取事件的值，即所选选项的值，并将数据过滤到一个新数组进行显示。 作为建议，最好读取服务返回的每个iso_id的数据，然后使用已读取的所有唯一值实例化每个 md 选项的值。

在此处查找修改后的工作压倒器

Answer 2

我意识到我在代码中哪里出错了。

onSelect(val, button: IButton) {
if (val = "Charge Only" || "PJM" || "USCD" || "Not in ISO Market" || "Any") {
this.selectedISO = val;
this.onClickView(val, button)
}
else if (val = "NC" || "GI" || "SLP" || "IA") {
this.selectedStatus = val;
this.onClickView2(val, button);
}
console.log(val);
}

我比较值的部分不正确。我通过像这样更正 if 语句来解决此问题-

if (val = "Charge Only" || val ="PJM" || val ="USCD" || val = "Not in ISO Market" || val ="Any") {
this.selectedISO = val;
this.onClickView(val, button)
}

非常感谢用户的所有帮助！