Javascript 使用Map的Angular 6 HttpClient

出于学习目的，我试图从一个json伪API获取数据，并在返回一个可观察数据之前向所有标题添加“嘿”。到目前为止，如果我不使用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>

用户ID是：{{course.userId}}

标题是：{{course.Title}}

正文是：{{course.Body}}

ID是：{{course.ID}
没有可用的数据

应用程序组件：

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

  }
}

从'@angular/core'导入{Component，OnInit}；
从“/posts.service”导入{PostsService}”；
从“rxjs”导入{observeable}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
courseDatas$：可观察；
构造函数（私有posts:PostsService）{}
恩戈尼尼特（）{
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";
        }
      }),
    );
  }

从'@angular/core'导入{Injectable}
从“@angular/common/http”导入{HttpClient}；
从“rxjs”导入{observeable}；
从“rxjs/operators”导入{map}；
@注射的({
providedIn:'根'
})
出口类邮政服务{
私人姿势：string=https://jsonplaceholder.typicode.com/posts';
构造函数（私有http:HttpClient）{}
getData（）：可观察{
返回this.http.get（this.postrl.pipe）(
地图（数据=>{
for（让数据作为数组）{
datas.title=datas.title+“嘿”；
}
}),
);
}

---

因此，如果我在我的服务中的getData方法中没有使用map操作符，则所有内容都会正确显示。如果我在App.Component中使用console.log coursesDatas$时使用map操作符，则控制台会显示Observable，因此我不理解为什么它不能与模板中的异步管道一起工作。此外，如果我使用console.log（datas.title）在my map操作符中，它会记录每个标题，并在末尾加上Hey。

map

应该返回一些内容来改变当前属性，在您的情况下，我想您应该返回

数据

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

请注意，如果arrow函数中缺少大括号，它将自动返回
您的map回调实际上不会返回任何内容。您需要点击，或者，更好的是（因为它没有副作用），从回调中返回一个新数组。很高兴了解自动返回。我忘记了它。我无法获取map（data=>data.map）（d=>d.title=d.title+“嘿”）；去工作。也谢谢你的帮助inputs@Jean-PhilippeDufour你得到了什么输出？@Jean PhilippeDufour我已经修好了，请再检查一遍。很好。谢谢。我有点傻，我甚至没有检查地图的正确实现。
getData(): Observable<any> {
    return this.http.get(this.postURL).pipe(
      map(data => data.map(d => (d.title = d.title +"Hey", d));
      }),
    );
 }