Question

我正在尝试学习角度，但是在尝试将响应中的值放入局部变量时遇到了困难。

我从服务器获得的数据如下：

[{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 = [];
}

我尝试了其他一些事情，例如地图和订阅，但似乎都没有用。我已经尝试了几乎所有来自互联网的示例，但始终遇到问题。请有人解释。

Answer 1

异步/等待不会与可观察对象混合。 rxjs用法类似于：

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

Answer 2

使用最佳做法，将可观察对象暴露给模板，并让Angular使用异步管道在后台处理订阅/取消订阅。

<!DOCTYPE html>
<html lang="en">
   <head>
      <link href="/static/core/patterns.css?1587877907" rel="stylesheet" type="text/css">
   </head>
   <body>
      <div class="wrapper">
         <div class="jumbotron jumbotron-gray">
            <article class="post" data-key="294" data-slug="example">
               <div class="post__details">Example</div>
            </article>
         </div>
      </div>
      <script src="/static/core/base.js?1587877907"></script>
   </body>
</html>

接受以上建议也可以为您服务

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();
    }
}

类型'Observable <any>'不存在属性'json'

2 个答案: