如何将事件数据从下拉列表传递到按钮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

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

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> 

Answer 2

更改onSelect方法来解决这个问题。

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