Почему наблюдатель asyn c приходит к l oop? - PullRequest
Новая
       4

Почему наблюдатель asyn c приходит к l oop?

0 голосов
/ 07 мая 2020

В шаблоне я использую asyn c pipe: 

  {{ constructionObjectsDataService.findbycadnum$() | async }}

Сервис: 

@Injectable({
  providedIn: "root",
})
export class ConstructionObjectsDataService {
      public findbycadnum$ = (): Observable<any> => {
        return this.httpClient.get(
          `${environment.apiUrl}/${this.URL_PATH}/findbycadnum`,
          {
            params: HttpParamsBuilder.buildQueryParams(
              this.parametersService.constructionObjectDataParameters
                .findbycadastnumberParams
            ),
          }
        );
      };

}

Почему я получаю l oop запросов к серверу, используя: 

 {{ constructionObjectsDataService.findbycadnum$() | async }}

1 Ответ

0 голосов
/ 07 мая 2020

Вот пример, где каждую секунду параметр времени обновляется из функции «asyn c» (имитируемой): 

@Component({
  selector: "app-root",
  template: "<div> Time: {{ time | async }}</div>"
})
export class AppComponent {
  time = new Observable<string>((observer: Observer<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

Это то поведение, которое вы ищете?

Вы можете видеть, что работает в этой песочнице: https://codesandbox.io/s/angry-elion-1eb8j?file= / src / app / app.component.ts

Обновление

Если вы хотите вызывать его при загрузке Компонента, а затем каждый раз, когда вы решаете, вы можете подписаться на другой метод (pullData ()) и вызывать этот метод каждый раз, когда вы хотите «обновить sh» данные: 

@Component({
  selector: "app-root",
  template: `
    <div>Time: {{ findbycadnum }}</div>
    <button (click)="pullData()">Update Value</button>
  `
})
export class AppComponent implements OnInit {

  findbycadnum; 

  constructor(private httpClient: HttpClient) {
  }

  ngOnInit(): void {
    this.pullData().subscribe(res => {
      this.findbycadnum = res;
    },
    err => {
      console.log('ERROR', err);

    });
  }

  pullData(): Observable<any> {
    return this.httpClient.get(
      `${environment.apiUrl}/${this.URL_PATH}/findbycadnum`,
      {
        params: HttpParamsBuilder.buildQueryParams(
          this.parametersService.constructionObjectDataParameters
            .findbycadastnumberParams
        ),
      }
    );
  }
}

Надеюсь, это поможет. (Я не тестировал его, потому что ваш настроенный HTTP-запрос не может быть протестирован в этой песочнице)

...