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

Question

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

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

您的代码中存在一些问题。

1. 在 onSelect()功能，你必须设置 selectISO值并设置 containerDisplay至false ，因为每次选择项更改数据 div应隐藏并仅在单击“数组”按钮时显示。

2. 在 onClickArray() ，您必须设置containerDisplay至true .

3. 我不知道为什么你需要 [(ngModel)]="containerDisplay"里面<button> 。您可以切换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>