标签: angular-observable

我正在尝试使用Angular5来实现HttpInterceptor在所有HTTP请求中注入Authorization标头.

我依赖于第三方库(ADAL,这里称为AuthService),它公开了一种acquireToken()方法来获取用于承载授权的令牌.

问题是aquireToken()返回一个observable,我必须订阅以获得我需要的真正字符串.

因此,我的代码永远不会注入标头,我想因为next.handle()在acquireToken()返回任何值之前执行.

如何确保在检索到令牌后才调用下一个处理程序？

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import {AuthService} from 'mylibrary';

@Injectable()
export class MyInterceptor implements HttpInterceptor {

    constructor(private auth: AuthService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        let headers = req.headers || new HttpHeaders();

        this.auth.acquireToken(req.url)
            .subscribe((token: string) => {
                headers = headers.append('Authorization', 'Bearer …

我在从 http.get 请求中获取正确的可观察类型时遇到了一些麻烦。这是我遇到问题的功能：

getMovie(title:string, year:number): Observable<Movie> {
    const params = new HttpParams()
        .set('title', title)
        .set('year', year.toString());
    return this.http.get(this.moviePath, {params})
  }

如您所见，我想Movie使用参数'title'和'year'. 问题是响应总是返回类型Observable<Object>而不是Observable<Movie>.

我知道我可以创建一个新的 Movie 实例，为其提供从列表中收到的属性。问题在于我的电影类具有可选的属性。这是我的电影课：

export class Movie {
  title:string;
  year?:number;
  imdb?:string;
  trailer?:string;
  reviewClip?:string;
  reviewSummary?:string;
  reviewScore:number;
  createdAt?:Date;
  bestWeek:boolean;
  bestMonth:boolean;
}

有没有人知道一种简单的方法来使响应成为类型Observable<Movie>而不是Observable<Object>

我看过一些教程，展示了在 Angular 中实现可观察量的多种不同方法。对于我的目的来说，其中许多似乎过于复杂。其他的是以前的版本，不再工作。

假设我有一个具有名为 的单个属性的服务numChickens，并且我希望允许组件订阅该属性。Do.i.really((need)=> to.chain((a)=>{million.garbledyGook().statements.to('gether)}) 才能实现这一点吗？

这是相关服务的代码：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ChickenService {

  public chickens: number; 

  constructor() { }

}

...这是将使用可观察对象的组件的代码：

import { Component, OnInit } from '@angular/core';
import { ChickenService } from '../chicken.service';

@Component({
  selector: 'app-chickendisplay',
  templateUrl: './chickendisplay.component.html',
  styleUrls: ['./chickendisplay.component.scss']
})

export class ChickenDisplayComponent implements OnInit {

  constructor(public cs: ChickenService) {
  }

  ngOnInit() {
  }

}

在 Angular 6 中，在 ChickenService 中公开属性以便组件类能够以可观察流的形式访问该属性的值的最简单、最直接、最易读的方法是什么？chickens或者组件模板可以使用异步管道显示值？

我怎么强调都不为过——拜托，不要在答案中包含 8,192 …

我正在使用：Angular V6.1.0，Angular Material V6.4.1

我正在尝试捕获 HTTP 错误并使用 MatSnackBar 显示它们。我试图在我的应用程序的每个组件中展示这一点（那里有一个 http 请求）。以免做重复的代码

否则，我应该在每个组件中重复相同的代码，以显示插入错误的 MatSnackBar。

这是我的服务：

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
// import { HttpClient, HttpErrorResponse, HttpRequest } from '@angular/common/http';
import { Observable, throwError, of, interval, Subject } from 'rxjs';
import { map, catchError, retryWhen, flatMap } from 'rxjs/operators';
import { url, ErrorNotification } from '../globals';
import { MatSnackBar } from '@angular/material';
import { ErrorNotificationComponent } from '../error-notification/error-notification.component';


@Injectable({
  providedIn: 'root'
})
export class XhrErrorHandlerService …

我需要根据某个标志渲染来自不同 ngrx 存储的数据。两个存储都提供相同类型的数据。

方法一

<ng-contaier *ngIf="flag$ | async; else anotherStoreData">
    <ng-container *ngIf="store1$ | async as store1">
        <div>{{ store1?.prop1 }}</div>
        <div>{{ store1?.prop2 }}</div>
    </ng-container>
</ng-contaier>
<ng-template #anotherStoreData>
    <ng-container *ngIf="store2$ | async as store2">
        <div>{{ store2?.prop1 }}</div>
        <div>{{ store2?.prop2 }}</div>
    </ng-container>
</ng-template>

flag$: Observable<boolean>
store1$: Observable<Store>
store2$: Observable<Store>
ngInit() {
    flag$ = streamService.userNewStore();
    store1$ = this.store.select(<someselector1>);
    store2$ = this.store.select(<someselector2>);
}

方法2

<ng-container *ngIf="store$ | async as store">
    <div>{{ store?.prop1 }}</div>
    <div>{{ store?.prop2 }}</div>
</ng-container>


store$: Observable<Store>
ngInit() {
    streamService.userNewStore()
    .pipe(takeUntil(this.ngUnsubscribe))
    .subscribe((flag) => …

我正在使用 PrimeNG 开发 Angular 应用程序。特别是我正在使用 PrimeNG DataTable，这个组件：https ://primefaces.org/primeng/showcase/#/table

我按照之前官方文档所示的方式使用没有问题。基本上，我可以从 Firebase FireStore 数据库检索对象列表，然后以建议的方式将此对象列表使用到数据表 HTML 定义中，如下所示：

<p-table [value]="MY-RETRIEVED-OBJECT-LIST">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td *ngFor="let col of cols">
                    {{car[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

我问是否有可能（以及如何）使用更具反应性的方法。

我尝试用一​​个例子来解释。在我的组件 TypeScript 代码中，我没有对象列表，但我有这个Observable：

employeesList$:Observable<Employee[]>;

在我的组件的ngOnInit()中，我有：

ngOnInit() {

    this.loadEmployeesList();
    ................................
    ................................
    ................................

}

这个loadEmployeesList()是一个组件方法，它只需调用一个服务类即可获取之前的EmployeesList$:Observable<Employee[]>对象：

async loadEmployeesList() {
    this.employeesList$ = await this.employeeService.getAllEmployees();
}

所以基本上以这种方式，我不会订阅 Observable 来检索必须传递给我的 PrimeNG 数据表定义的显式对象列表，但我有一个Observable发出Employee …

我知道当canActivate函数返回一个简单的时boolean,角度路径保护以指定的顺序执行,但是,如果守卫返回类型Observable<boolean>或Promise<boolean>？

路线示例:

{
    path: 'confirm',
    canActivate: [AuthGuard, SessionExpiredAuthGuard, CheckoutAuthGuard],
    component: CheckoutReviewOrderComponent
},

SessionExpiredAuthGuard和CheckoutAuthGuard都返回类型Observable<boolean>.我不希望在SessionExpiredAuthGuard完成从异步http请求中检索数据之前执行CheckoutAuthGuard.

有没有办法强制这些异步防护按顺序执行？

在我的角度应用程序中，我创建了一个Observable来为多个组件提供数据更新。当用户单击按钮时，应使用不同的数据集更新所有可观察对象的订户。下面是代码。

import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';

export class MyService {
private data: number[] = [5,6,7,8];

/// The observable given to outside
private observable: Observable<number[]>;

/// Subscribers of the observable which is given to outside
private subscribers: Map<number, Subscriber<number[]>>;
private nextSubscriberId = 0;

constructor() {
    this.subscribers = new Map();
    this.observable = new Observable(subscriber => {
        const id = ++this.nextSubscriberId;
        this.subscribers.set(id, subscriber);

        subscriber.next(data);

        return () => { this.subscribers.delete(id); };
    });

}

}

在按钮单击事件中，我执行以下操作

data = …

当我使用httpClient调用我的 Web 服务时，我开始在我的 Angular 服务中使用 Spring Rest 和 Angular 5 实现一个简单的分页，并获得对请求页面的正确响应，它在我的页面上正确显示数据，但控制台 Web 出现错误浏览器发现我的*ngFor循环中出现错误无法读取 undefined 的属性，尽管模板显示结果正确：

问题出在 Service 方法中：getPageClient() 和 *ngFor 指令这是我的错误日志：

这是我使用 observable 的服务：

import { Injectable } from '@angular/core';
import {Client} from '../models/Client'
import {PageClient} from '../models/PageClient'
import { Observable, of } from 'rxjs';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import {catchError,map,tap} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ClientService {

  private url = 'http://localhost:8099/api/clients';

  private urlPage = 'http://localhost:8099/api/clients/get?page=0&size=3';

  getClient(): Observable<Client[]>{
     return this.http.get<Client[]>(this.url)
      .pipe( …

我是 Angular 的新手，所以我不会因为缺少基本的东西而感到惊讶。我尝试了 Angular 文档和谷歌搜索，但到目前为止不知道为什么我的组件在单击后只更新 UI？

我的场景是，我想要一个名为NotificationComponent的共享组件和一个名为NotificationService的共享服务。由于我可能会发生超过 1 个错误，因此我的NotificationComponent应该显示所有这些消息。最重要的是，我有一个 http 错误拦截器和一个自定义错误处理。

发生的情况是，我收到 3 个 https 错误，拦截器正在处理所有 3 个错误，自定义错误处理正在处理所有 3 个错误，通知服务正在创建所有 3 个错误，但通知组件仅自动呈现 1 个（有时是 2 个）错误。一旦我点击用户界面中的任意位置，就会出现提醒消息。为什么会发生这种情况？

层次结构：AppModule导入SharedModule[包含通知服务和组件]。通知组件选择器位于内部app.component.html

成分：

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit, OnDestroy  {
  
  messages: Message[] = [];
  notificationSubscription: Subscription;

  constructor(private notificationService: NotificationService) { }

  ngOnInit() {
    this.notificationSubscription = this.notificationService.onNotify()
      .subscribe(msg => {
        this.messages.push(msg);
      });
  }

  ngOnDestroy() {
    // unsubscribe to …