Question

我的html页面中有三个选择选项。基于这三个选择值，我需要在另一个文本框中写入一个值。

  <select (change)="aaFilter($event.target.value)" class="form-control">
        <option *ngFor="let type of aa" [value]="type.value"> 
         {{type.display}}
        </option>
    </select>

  <select (change)="bbFilter($event.target.value)" class="form-control">
        <option *ngFor="let type of bb" [value]="type.value"> 
         {{type.display}}
        </option>
    </select>

   <select (change)="ccFilter($event.target.value)" class="form-control">
        <option *ngFor="let type of cc" [value]="type.value"> 
         {{type.display}}
        </option>
    </select>


So I have Onchange function in every select box. Now In my typescript file my 

 aaFilter(selectedaa:string){
    console.log('value is ',selectedaa);
 }

同样，我已经编写了三个函数。但是基于此值，我需要在文本框中设置一个值。

   headerName(){

      //Here I need to take up the threee selected values from drop down & do some function based on that. 
   }

该如何在angular 6和打字稿中完成？

Answer 1

在组件中：

Public selectedValues = [];

aaFilter(value, index){
this.selectedValues[index] = value;
this.updateModelInput();
}

bbFilter(value, index){
this.selectedValues[index] = value;
this.updateModelInput();
}

ccFilter(value, index){
this.selectedValues[index] = value;
this.updateModelInput();
}

updateModelInput(){
   if(this.selectedValues.length === 3){
       // UPDATE THE VALUE IN TEXT BOX
   }
}

在模板中，您可以将值0、1、2作为更改方法中的第二个参数传递。

Answer 2

好吧，您还没有将任何内容绑定到选择选项上吗？

  <select 
       [(ngModel)] ="filterA"
       (change)    ="headerName()" 
        class      ="form-control">
      <option *ngFor="let type of aa" [value]="type.value"> 
         {{type.display}}
      </option>
  </select>

  <select            
       [(ngModel)] ="filterB"
       (change)    ="headerName()" 
        class      ="form-control">
      <option *ngFor ="let type of bb" [value]="type.value"> 
         {{type.display}}
      </option>
  </select>

  <select            
       [(ngModel)] ="filterC"
       (change)    ="headerName()" 
        class      ="form-control">
      <option *ngFor="let type of cc" [value]="type.value"> 
        {{type.display}}
      </option>
  </select>

在您的组件文件中：

headerName()
{
    /* Do whatever this function is supposed to do whenever one of the 
       filters is changed. The variables filterA, filterB and filterC will 
       now always have the most recent values for you to operate on */
}

如何在另一个函数中调用角度函数？

2 个答案: