使用Map的Angular 6 HttpClient

Question

出于学习目的，我试图从json虚假API中获取数据，并在返回Observable之前为所有标题添加“嘿”。到目前为止，如果我不使用Map，即使在使用map时，我也可以显示数据；如果我console.log我的变量，它显示为Observable，但它不会显示在模板中。

<div class="col-6" *ngIf="courseDatas$ | async as courses else NoData">
  <div class="card" *ngFor="let course of courses">
    <div class="card-body">
      <span><strong>User ID is : </strong>{{course.userId}}</span><br>
      <span><strong>Title is : </strong>{{course.title}}</span><br>
      <span><strong>Body is : </strong>{{course.body}}</span><br>
      <span><strong>ID is : </strong>{{course.id}}</span>
    </div>
    <ng-template #NoData>No Data Available</ng-template>
  </div>
</div>

应用程序组件：

import {Component, OnInit} from '@angular/core';
import {PostsService} from "./posts.service";

import {Observable} from "rxjs";

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

export class AppComponent implements OnInit {
  courseDatas$ : Observable<any>;

  constructor(private posts : PostsService){}


  ngOnInit(){
    this.courseDatas$ = this.posts.getData();

  }
}

邮政服务：

import { Injectable } from '@angular/core'
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {map} from "rxjs/operators";

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

  private postURL: string = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get(this.postURL).pipe(
      map(data => {
        for (let datas of (data as Array<any>)){
          datas.title = datas.title + "Hey";
        }
      }),
    );
  }

因此，如果我在服务的getData方法中未使用map运算符，则所有内容都会正确显示。如果我在App.Component中使用console.logcoursesDatas $时使用地图运算符，则控制台显示“可观察”，因此我不明白为什么它不适用于模板中的异步管道。另外，如果我在地图运算符中使用console.log（datas.title），它的末尾确实会记录每个标题。

Answer 1

map 应该返回一些东西来改变当前属性，在您的情况下，我想您应该返回 data

getData(): Observable<any> {
    return this.http.get(this.postURL).pipe(
      map(data => {
        for (let datas of (data as Array<any>)){
          datas.title = datas.title + "Hey";
        }
        return data;
      }),
    );
}

通过您可以使用的方法Array.prototype的map，而不是for循环也发生变异数据

getData(): Observable<any> {
    return this.http.get(this.postURL).pipe(
      map(data => data.map(d => (d.title = d.title +"Hey", d));
      }),
    );
 }

请注意，如果箭头功能中缺少花括号，它将自动返回