如何使用 Observables/实时更改角度 2 中表中的一项

Question

我在 angular4 和 node.js 应用程序中遇到问题。我通过 *ngFor 在一个有 7 列的表中显示数据。现在的问题是，我需要动态地实时更新最后一列。即，如果列 -> Active ... 为 Yes ，则显示绿色，当 Active ... 为 No 时，显示红色。但是我不确定如何实时更新最后一列，并且只更新最后一列。

[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

首先，您不需要两个开关，但您的方式是可以的，但对于我们的讨论，假设我们有一个开关“isActive”。

我认为您的代码应该可以工作，但您需要确保订阅正在触发，例如。

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

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

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

或

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

以上任何一种都可以。因此，只需尝试调试您的 observable 以按照您想要的方式工作，例如。应该在什么时候发射以及以什么频率发射。