Question

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

<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);
    }
  }

基本上，on（change）事件我们调用传递事件的方法，然后我们读取事件的值，它是所选选项的值，我们将数据过滤到新数组以供显示。作为建议，如果您读取服务返回的每个iso_id的数据，然后使用您已读取的所有唯一值实例化每个md-option的值，那会更好。

找到修改后的工作plunker here

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)
            }

非常感谢用户提供所有帮助！

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

2 个答案:

修改