javascript - 使用 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.log coursesDatas$ 时使用 map 运算符，控制台会显示 Observable，所以我不明白为什么它不适用于模板中的异步管道。此外，如果我在我的 map 运算符中使用 console.log(datas.title)，它会记录每个标题，最后带有 Hey。

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

注意如果箭头函数中缺少花括号，它会自动返回