Как я могу показать & amp; скрыть простой CSS-обтекатель, получая данные из базы данных с моим сервисом - Angular 2 & gt;
Я думаю, вам нужно написать дополнительный код. Например:
if 'MICHAEL89' in map(lambda name: name.upper(), USERNAMES):
...
В этом случае мы формируем новый список со всеми элементами в USERNAMES, преобразованный в верхний регистр, а затем сравниваем с этим новым списком.
Обновить
Как говорит @viraptor , лучше использовать генератор вместо map. См. @Nathon ответ .
2 ответа
Вы можете показать скрытие и знать успешность загрузки базы данных и прочитать полный отклик с помощью функции углового наблюдения
getAll(): Observable<HttpResponse<Person[]> {
return this._http.get<Person[]>(apiUrl,{ observe: 'events' })
.catch(
(error: HttpErrorResponse) => {
return Observable.throw(error);
});
// Somewhere here I would hide a spinner? Is this possible, I mean will this be shown when data is fully loaded or ?
}
Вы можете настроить счетчик на службе или вы можете изменить состояние счетчика внутри компонентов, где вы подписываете пример getAll () наблюдаемый
components.ts
this.service.getAll().subscribe((response:HttpEvent<Object>)=>{
//console.log(response);
//import the HttpEventType from @angular/common/http
if(response.type==HttpEventType.DownloadProgress){
this.showSpinner = true;
}
if(response.type==HttpEventType.Response){
this.showSpinner = true;
}
})
Измените свою службу, чтобы использовать BehaviorSubject вместо простой boolean и воспользоваться операциями rxjs pipe и tap, чтобы вы могли установить флаг spinner в самой службе, а не переключать в каждый потребительский компонент обслуживания.
@Injectable()
export class PersonsService {
public showSpinner: BehaviorSubject<boolean> = new BehaviorSubject(false);
public readonly apiUrl = "https://api.github.com/users";
constructor(private _http: HttpClient) { }
getAll(): Observable<Person[]> {
this.showSpinner.next(true);
return this._http.get<Person[]>(this.apiUrl).pipe(
tap(response => this.showSpinner.next(false),
(error: any) => this.showSpinner.next(false))
);
}
}
Вы можете использовать трубу async для доступа к showSpinner
<div class="loader" *ngIf="_personService.showSpinner | async">
</div>
<div *ngIf="!(_personService.showSpinner | async)">
<button (click)="foo()">Click here</button>
<pre>
{{response | json}}
</pre>
</div>