Установите наблюдаемый и просто обновляйте, если изменения - PullRequest
Новая
       2

Установите наблюдаемый и просто обновляйте, если изменения

0 голосов
/ 03 октября 2018

Ну, я использую службу API: 

getServers():Observable<Server[]>{
    return this.httpClient.get(this.API_URL).pipe(map((servidores:Server[]) =>{
        const servidores2 = plainToClass(Server, servidores as object[]) ;
        servidores2.forEach(servidor => {
            this.getApps2(servidor.ServerId, apps =>{
              servidor.Applications = new Array(apps.length);
              servidor.Applications = apps ;
            });
        });
        return servidores2;
      }));
  }

Итак, я вызываю его из "ServerListComponent": 

@Injectable()
export class ServerListComponent implements OnInit {
  @Input() servers$: Observable<Server[]>;
  public serverCards:Server;
  constructor(private serverAPI: ServersService){}

  ngOnInit(){ this.servers$ = interval(5000).pipe(startWith(0)).pipe( switchMap(() => this.serverAPI.getServers())); }

  ngOnDestroy() { }

}

И, конечно, в HTML я отправляю другомудочерний компонент: 

  <server-card *ngFor="let server of servers$ | async" [serverCards] = "server" ></server-card>

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

export class ServerCardComponent{ 
  private _serverCards: Observable<Server>;
  asyncTabs: Observable<Tabs>; 


  @Input() 
  set serverCards(servidor:Observable<Server>) {
    if(servidor == this._serverCards){
      //if data is the same do nothing
    }else{
      //only update if data changed
      this._serverCards  = servidor;
    }


  }

  get serverCards():Observable<Server> {

    return this._serverCards;
  }

Конечно, последний сработал, Я не знаю, как "сравнить" оба наблюдаемых и только обновляетшаблон, если это не те же данные , я прочитал там, что я должен использовать, может быть, Differentuntilchange или Zip, но я не знаю, как реализовать для моего решения.

Мой шаблон для cardServer ниже вЕсли вам нужно: 

<mat-card class="dashboard-card"> 

    <mat-card-header class="header-cardsita">

        <div mat-card-avatar class="led-box"><div class="{{serverCards.State | stateLed}}"></div></div>
        <mat-card-title>
            <div mat-card-avatar class="redondo-avatar-pc"></div>

          <p ><a class="title-cardsita" href="/Admin/server/{{serverCards.ServerId}}">{{serverCards.Hostname}}</a> </p>
        </mat-card-title>
        <mat-card-subtitle><p class="subtitulo">{{serverCards.Ip }}</p></mat-card-subtitle>

        <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
          <mat-icon>more_vert</mat-icon>
        </button>
              <mat-menu #menu="matMenu" xPosition="before">
                <a class="enlace" href="/Admin/server/{{serverCards.ServerId}}">
                    <button mat-menu-item>Details</button>
                </a>

                <button mat-menu-item>Edit</button>
                <button mat-menu-item>Delete</button>
              </mat-menu>


    </mat-card-header>
    <mat-divider class="divisor-top"></mat-divider>


    <mat-card-content class="dashboard-card-content">
        <p class="content-icons"><i class="material-icons color-accent">group</i>{{serverCards.Team}}</p>

        <p class="content-icons"><i class="material-icons color-accent">subdirectory_arrow_right</i>{{serverCards.OperatingSystem}}</p>



        <p class="content-icons"><i class="material-icons color-accent">label</i></p><p class="description">{{serverCards.Description | truncate : 90 : "..."}}</p>

        <mat-divider ></mat-divider>

              <br>
              <ul *ngIf="serverCards.Applications" >
                  <li *ngFor="let app of serverCards.Applications">{{app.Name}}</li>
              </ul>







    </mat-card-content>
  </mat-card>

Спасибо.

1 Ответ

0 голосов
/ 05 октября 2018

Ну, это мое последнее решение, надеюсь, оно может помочь кому-то с моей проблемой:

Сначала я создаю наблюдаемое, которое потребляет мой API каждые 5 секунд 

servidores$ =  interval(5000).pipe(startWith(0)).pipe( switchMap(() => this.getServersOnly()));

¿Чтонаходится рядом?конечно, я просто хочу получить только отличные. 

getServersDistinct():Observable<Server[]>{
   return this.servidores$.pipe(distinctUntilChanged((p:Server[], q:Server[]) => (JSON.stringify(p) === JSON.stringify(q))));
  }

Прибыль , теперь у меня есть наблюдаемые в моем шаблоне с трубкой |Async теперь обновляется только после изменения данных.Я не знаю, может ли код стать лучше, но у меня работает.

...