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

【问题标题】：send same event to two different functions of corresponding button click in Angular 2 Typescript将相同的事件发送到Angular 2 Typescript中相应按钮单击的两个不同功能
【发布时间】：2017-09-05 02:44:48
【问题描述】：

我有一项服务可以获取我在组件中的两个不同变量中订阅的 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() 向这两个函数发送数据。

【问题讨论】：

标签： angular typescript

【解决方案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-option 的值，会更好。

找到修改后的工作插件here

【讨论】：

谢谢，但我仍然得到一个空数组
坦率地说，我仍然没有得到你想要达到的目标。您有两个下拉菜单和两个按钮。用这 4 个你想过滤同一个数组？你的流量是多少？我用你的代码做了一个 plunker here，也许这会帮助你解释。
我无法在 plunk 中复制我的问题，因为我无法在服务中设置 JSON 数据。基本上，用户可以从下拉列表 A 或下拉列表 B 中进行选择。每个都显示相同的 JSON 数据集，但根据标准 A 或 B 进行过滤。这些按钮用于决定您是要显示数据数组还是列表。如果我在按钮中使用 2 个功能，我不会获得其中一个功能的数据
不要使用服务，而是直接在 plunker 上的组件上声明 json 并尝试复制问题。
嗨。感谢您的耐心等待。这个plnkr.co/edit/cTytNTr2cVXCX2yJEIIO?p=preview 是我在复制问题时所得到的。我以前没有与 plunker 合作过，它给了我太多错误，并且当我添加东西时会不断中断。目前我有 TSO 下拉和按钮可以工作，但按钮没有过滤，而是显示所有值。这变得非常令人沮丧。你有什么建议吗？提前致谢

【解决方案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)
            }

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

【讨论】：