每当变量更改时更新列表html

时间:2019-10-25 10:27:45

标签: angular

我有一个问题。我在函数中有此代码,调用该函数时此代码返回布尔值  col.transformed


           if (col.value.name === this.selectedColumn) {
             console.log('rrrrrr',compilerequest)
             if(dataFiltered.requestParsed!="\"\""){
             col.transformed = true;
             this.formControlValue = "";
             this.selectedColumn = "";
             console.log('ghhh',this.selectedColumn,this.formControlValue,col.transformed)
           }
             else{
             col.transformed=false;
             console.log('jjjjjjj',col.value.name)
           }
         }
         });```
and in the template i display the element if ```col.transformed==true```
```<tr *ngFor="let transf of cols">
               <td *ngIf="transf?.transformed" style="height: 47px;cursor: pointer;padding-left: 42px;padding-top: 15px;display: inline-flex;margin-bottom: 5px;">
                   <div class="label"> {{transf?.value?.name}} </div>
                   <span class="label2">{{transf?.value?.type}}</span>
               </td>
           </tr>```
but when a element is displayed however the value of ```col.trformed``` is changed to false,the list displayed is not updated,how can i update it whenever the value ```col.transformed``` is changed.

1 个答案:

答案 0 :(得分:0)

如果我对您的理解正确,那么我认为您想在更改变量后更改/更新HTML内容?

我建议使用Angular内置的更改检测。

进口:

    import { ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

组件:

    @Component({
       changeDetection: ChangeDetectionStrategy.OnPush
    })

构造函数:

    public changeDetection: ChangeDetectorRef

...并且在函数结尾,您应该使用markForCheck标记可能的更改

    this.changeDetection.markForCheck();

希望对您有帮助!

致谢