2

我有一个下拉列表，当前以阵列方式显示对象。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)
    }
    }
4

2 回答 2

1

改变你的onSelect方法来解决这个问题。

  onSelect(val) {
      console.log(val);
      this.selectedISO = val; 
  }
于 2017-08-09T07:00:38.183 回答
1

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

  1. 在onSelect()函数中，您必须设置selectISO值并将其设置containerDisplay为false，因为每次选择项更改时，数据div都应该被隐藏，并且仅在单击“数组”按钮时才显示。

  2. 在 中onClickArray()，您必须将 设置containerDisplay为true。

  3. 我不确定你为什么需要[(ngModel)]="containerDisplay"inside <button>。containerDisplay您可以从组件切换。

我为演示创建了这个plunker 示例

示例中的代码片段：

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>
于 2017-08-09T13:58:56.530 回答