如何将事件数据从下拉列表传递到按钮 angular 2

Question

我有一个当前以排列方式显示对象的下拉列表。 JSON 数据来自注入组件的服务。我根据 iso_id 过滤数据，并从下拉列表中选择一个选项后，我显示过滤后的数据。我试图仅在选择相应选项后单击按钮（数组）时才显示此数据。现在，从下拉列表中选择一个选项会显示数据，然后单击 Array 按钮使其消失。如何将此数据传递到按钮点击中？这是一些示例代码-

HTML

<md-select [(ngModel)]="selectedISO" (ngModelChange)="onSelect(selectedISO)" placeholder="TSO" [(ngModel)]="containerDisplay" >
      <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 </mdoption>
      <md-option  value="UCSD"> UCSD </md-option>
    </md-select>

<button md-button (click)="onClickArray(selectedISO)"  [(ngModel)]="containerDisplay" ngDefaultControl> 
             Array  
          </button>

<div class="ui-ivs-container" *ngIf="containerDisplay"  >
            <div class="ui-ivs-resources">
                <div  *ngFor="let resource of isoToShow; let i = index;"   
                [ngClass]="{...}">     
                       //Array of objects gets displayed//
                </div>
            </div>

我的 TS 文件是这样的-

    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
    })
    export class HomeComponent implements OnInit {
       containerDisplay:boolean;
       selectedISO;
constructor(private service: Service) {
       this.isoToShow=this.isoArray; // gets populated by subscribing to service
                     }

    onSelect(val){
      console.log(val);
      this.onClickArray(val);
    }
    onClickArray(val){
    this.isoToShow=this.isoArray.filter(resource => resource.iso_id===val)
    }
    }

Answer 1

更改您的 onSelect 方法来解决此问题。

  onSelect(val) {
      console.log(val);
      this.selectedISO = val; 
  }

Answer 2

您的代码中几乎没有问题。

在 onSelect() 函数中，您必须设置 selectISO 值并将 containerDisplay 设置为 false，因为每次 select 项更改数据 div 应隐藏，仅在单击 'Array' 按钮时显示。
在onClickArray()中，您必须将containerDisplay设置为true。
我不确定为什么 <button> 里面需要 [(ngModel)]="containerDisplay"。您可以从组件切换 containerDisplay。

我已经为演示创建了这个plunker example

示例中的代码片段：

ts:

containerDisplay:boolean;
  selectedISO;

  constructor(private appState: AppState){ }

  ngOnInit(){
    this.getData();
  }

  getData(): void {
    this.appState
        .fetchFilterFields()
        .then(data => {
          // console.log(data)
          this.appState.setData(data);
          this.isoArray = data
        });
  }

  onSelect(val){
    console.log(val);
    this.selectedISO = val;
    this.containerDisplay = false;
  }

  onClickArray(val){
    this.containerDisplay = true;
    if(this.isoArray){
      this.isoToShow = this.isoArray.filter(resource => resource.iso_id === val);
    }

  }

html:

<md-select [(ngModel)]="selectedISO" (ngModelChange)="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-select>

<p></p>
<button md-raised-button 
        (click)="onClickArray(selectedISO)"> 
        Array  
</button>

<p></p>

<div class="ui-ivs-container" *ngIf="containerDisplay"  >
    <div class="ui-ivs-resources">
      <div  *ngFor="let resource of isoToShow; let i = index;">     
           {{ resource | json}}
      </div>
    </div>
</div>

如何将事件数据从下拉列表传递到按钮 angular 2

How to pass event data from drop-down to button angular 2

javascript

event-binding

angular2-ngmodel

angular