イベントデータをドロップダウンからボタン角度2に渡す方法

Question

現在、オブジェクトを配列形式で表示するドロップダウンリストがあります。 JSONデータは、コンポーネントに注入されたサービスから取得されます。私はiso_idに従ってデータをフィルタリングし、ドロップダウンからオプションを選択すると、フィルタリングされたデータを表示します。 それぞれのオプションを選択した後にボタン（配列）をクリックした場合にのみ、このデータを表示しようとしています。今すぐドロップダウンからオプションを選択するとデータが表示され、[配列]ボタンをクリックすると消えます。 このデータをボタンクリックに渡すにはどうすればよいですか？ は、ここで私のTSファイルには、この問題を解決するためにあなたのonSelect方法を変更this-

@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()機能で

1. 、あなたが選択した項目は、「アレイ」ボタンをクリックしたときにdivが示さ隠さのみすべきデータを変更するたび以来、selectISO値を設定し、containerDisplayfalseに設定する必要があります。

2. onClickArray()には、containerDisplayをtrueに設定する必要があります。

3. の中に<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

のように見えます

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

HTMLコード - いくつかのサンプルです。

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