How does Angular 6 update list information asynchronously?

I have learned a little bit of Angular, at the front end, and then I wrote a simple example, that is, to display the browser information. The relevant code is as follows, which can run normally. The interface will display the browser information first, and then display the IP address in a few seconds.

</mat-row>
    </mat-table>
  `,
})
export class ClientInfoComponent implements OnInit {
  dataSource: ClientInfoDataSource;
  displayedColumns = ["key", "value"];

  constructor(private clientInfoService: ClientInfoService) {
  }


  ngOnInit(): void {
    this.dataSource = new ClientInfoDataSource(this.clientInfoService);
  }
}

class ClientInfoDataSource implements DataSource<any> {
  constructor(private clientInfoService: ClientInfoService) {
  }

  connect(): Observable<ClientInfo[]> {
    return this.clientInfoService.getClientInfo();
  }

  disconnect(): void {
  }

}

Javascript rxjs angular

Mar.23,2021

rxjs requires a subscription, and in the above code, this.httpClient.get does not trigger subscribe, or even if it is subscribed, it has no effect because it is executed asynchronously. In the end, the value of observer, returned directly as clientInfo will always be [] .
correct practice getClientInfo () should return data this Observable defined in the code, for example:

getClientInfo(): Observable<ClientInfo[]> {
    ...
    const data = this.httpClient.get(ClientInfoService.ipUrl)
      .pipe(
        map((rs) => [{key: 'IP', value: rs['origin']}]),
        catchError(this.handleError('IP', ''))
      );
    return data;
  }

take a good look at the official documents, buddy

getConfig() {
  return this.http.get(this.configUrl);
}

showConfig() {
     this.configService.getConfig()
    .subscribe((data: Config) => this.config = {
        heroesUrl: data['heroesUrl'],
        textfile:  data['textfile']
    });
}

Previous: Web clicks the back button to return to the previous web page. Why didn't the js of the previous web page be executed?

Next: How to set the style of map prompt box in echarts