Как использовать Observables / в режиме реального времени изменить только одну запись в таблице в angular2 +

Question

Я застрял с проблемой в приложении angular4 и node.js.Я отображаю данные в таблице, которая имеет 7 столбцов через * ngFor.Теперь проблема в том, что мне нужно динамически и в режиме реального времени обновлять последний столбец.то есть, если столбец -> Active ... - Да, тогда я отображаю зеленый цвет, а когда Active ... - Нет, тогда я отображаю красный цвет.Но тогда я не уверен, как обновить последний столбец и только последний столбец в режиме реального времени.

[1] Я думал об использовании кода Observables в init, откуда я вызываю данные таблицы, но это будет только показывать загрузчик всегда, так как данные будут продолжать регулярно загружаться через несколько секунд и мешатьвесь вид таблицы.

[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 }">

Любойиз вышесказанного в порядке.Так что просто попробуйте отладить ваш наблюдаемый, чтобы работать так, как вы хотели, напр.когда он должен быть запущен и на какой частоте.