Question

我在angular4和node.js应用中遇到了问题。我通过* ngFor在一个包含7列的表中显示数据。现在的问题是，我需要动态地，实时地更新最后一列。即如果列 - ＆gt;活动...是，然后我显示绿色，当活动...是否，然后我显示红色。但后来我不确定如何更新最后一列，只有最后一列实时更新。

[1] 我想在init中使用Observables代码从我调用表数据，但这只会继续显示加载器，因为数据将在几秒钟后定期上传并干扰整个表视图。

[2] 我已根据if条件显示颜色，但在所有条目中，它仅显示绿色。

代码 -

interface.component.ts

 export class MasterInterfaceComponent implements OnInit {

  activeCheck;
   activeValue;
   activeRedColor;
    activeGreenColor;


   ngOnInit() {

    console.log("beginning of func");

   Observable.interval(15000).subscribe(x => {
    console.log("Called")
    this.viewData();
    });


   }


   viewData() {

     this.loading = true;
     var url = config.url;
    var port = config.port;
    this.http.post("http://" + url + ":" ...... ('Token') }) })
   .map(result => this.result = result.json(),

      )
     .subscribe((res: Response) => {
    this.loading = false;
    this.records = res;
    console.log("xxxx interface view result data ",this.result)
    console.log("XXXXXXXXXXXX  interface view res data ", res);

    this.activeCheck = this.result;

    for (let obj of this.activeCheck){
    for (let key in obj){

      if (key == "ACTIVE_YN"){

         if (obj[key] == "Y"){
           this.activeRedColor = false;
           this.activeGreenColor = true;

           console.log("this.activeGreenColor = true;");
         }

         else if (obj[key] == "N"){
          this.activeRedColor = true;
          this.activeGreenColor = false;

          console.log("this.activeGreenColor = false;");
         }
         }
       }
      }

     });


   }

interface.component.html

 <tbody>

   <tr *ngFor="let data of result |filter:filter| orderBy : 'IF_ID'|
              paginate: { itemsPerPage: 5, currentPage: p }; let i =      

    index">
    <td class="text-center" style="width:8%">
      <a [hidden]= "accessIdHide" [routerLink]="['/master-system/update-  
         interface']" (click)="forUpdate(data)" data-toggle="tooltip" 
      title="Update" style="color:#ffffff;;float:left"
        type="link">
        <span class="glyphicon glyphicon-plus-sign"></span>

    </a>{{data.IF_ID}}
    </td>
    <td>{{data.IF_CD}}</td>
    <td>{{data.IF_NAME}}</td>
    <td>{{data.IF_DESCRIPTION}}</td>
    <td>{{data.SRC_SYS_NAME}}</td>
    <td>{{data.TRGT_SYS_NAME}}</td>
    <td >

       <img [hidden]= "activeGreenColor" src = "url" width="10" height =        
     "10">{{data.ACTIVE_YN}}
      <img  [hidden] = "activeRedColor" src = "url" width="10" height = 
      "10">{{data.ACTIVE_YN}}
      </td>
     </tr>
   </tbody>

Answer 1

首先，你不需要两个开关，但你的方式是可以的，但是对于我们的讨论，我们只说我们有一个开关＆＃34; isActive＆＃34;。

我认为你的代码应该可行，但你需要确保订阅正在解雇，例如。

.subscribe((res: Response) => {
    console.log(res);

如果每次数据更改时此代码都会触发，那么您的img应该打开和关闭

<img *ngIf="isActive" src="url">

或

<img [ngClass]="{ isActive: green }">

上述任何一种都可以。所以，试着调试你的observable以你想要的方式工作，例如。什么时候应该被解雇，以及在哪个频率。

如何使用Observables /实时更改angular2 +表中的一个条目

1 个答案: