Свойство 'json' не существует для типа 'Observable <any>'

Question

Я пытаюсь выучить angular, но застрял при попытке перевести значение из ответа в локальную переменную.

Мои данные с сервера выглядят так:

[{text : 'Some text', owner: 'Tim'}, {text : 'second Message', owner : 'Jane'}]

Это мой сервис:

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';

@Injectable()
export class WebService {

    constructor(private http: Http) {}

    getMessages():Observable<any> {
        return this.http.get('http://localhost:1234/messages');
    }
}

А это мой компонент:

import { Component } from '@angular/core'
import { WebService } from './web.service'

@Component({
    selector: 'messages',
    template: `
    <div *ngFor="let message of messages">
        <mat-card style="margin:8px">
            <mat-card-title>{{message.owner}}</mat-card-title>
            <mat-card-content>{{message.text}}</mat-card-content>
        </mat-card>
    </div>
    `
})
export class MessagesComponent {
    constructor(private webService : WebService) {}

    async ngOnInit() {
        var response = await this.webService.getMessages();
        this.messages = response.json();
    }

    messages = [];
}

Я пробовал несколько других вещей, таких как карта и подписка, но ни одна из них, похоже, не работает. Я перепробовал почти все примеры из inte rnet, но всегда имел проблему. Пожалуйста, кто-нибудь, объясните.

Answer 1

asyn c / await не смешивается с наблюдаемыми. RX js использование как:

ngOnInit() {
    this.webService.getMessages().subscribe(response => {
      this.messages = response.json();
    })
}

Answer 2

Используя лучшие методики, выставьте наблюдаемое в шаблон и позвольте Angular обрабатывать подписку / отписку за кулисами, используя асинхронный канал c.

import { Component } from '@angular/core'
import { WebService } from './web.service'
import { Observable } from 'rxjs';

@Component({
    selector: 'messages',
    template: `
    <div *ngFor="let message of messages$ | async">
        <mat-card style="margin:8px">
            <mat-card-title>{{message.owner}}</mat-card-title>
            <mat-card-content>{{message.text}}</mat-card-content>
        </mat-card>
    </div>
    `
})
export class MessagesComponent {

   messages$: Observable<any>;

   constructor(private webService : WebService) {}

   ngOnInit() {
        this.messages$ = this.webService.getMessages();
    }
}

Принимая вышеизложенное, также сделайте это в своем услуга

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';

@Injectable()
export class WebService {

    constructor(private http: Http) {}

    getMessages():Observable<any> {
        return this.http.get('http://localhost:1234/messages').pipe(
            map(x => x.json())
        );
    }
}