将其订阅为forkJoin时，处理前端/角度JSON响应的最佳方法？

我读过关于这类问题的多个答案，每个答案都有自己的答案； 在我的例子中，我没有得到任何这些，因为我的接口没有像我希望的那样映射json。自从使用根对象和嵌套接口以来，我已经尝试了多种解决方案，但现在我要问的是，在前端处理此类JSON对象的最佳方法是什么，如何将其映射到这个特定的方法（fork-Join）。我想问，除了Intellisense之外，使用接口/类/映射的真正好处是什么？它与数据传播有关吗

讨论中的json结构：

{
    Title: "", 
    Year: "", 
    Rated: "", 
    Released: "", 
    Runtime: "", 

…}

虽然很简单。但在我的服务中，我称之为forkjoin：

 getMovies(name: string, year?: string): Observable<any> {
    let shortPlot = this.http.get(
      "https://www.omdbapi.com/?t=" +
        name +
        "&plot=short&y=" +
        year +
        "&apikey=[my key]"
    );
    let fullPlot = this.http.get(
      "https://www.omdbapi.com/?t=" + name + "&plot=full&apikey=[my key]"
    );
    return forkJoin([shortPlot, fullPlot]);
  }

在HTML中，我呈现如下数据：

 <div *ngFor="let m of movies">

<h5 class="mt-0">{{m.Title}}, {{m.Year}}</h5>
</div>

{{m.Title}，{{m.Year}

正如你所看到的，我没有使用接口，我应该这样做。有人能帮我解决吗

多谢各位

编辑：订阅后的日志：

让我们把它分解一下

除了Intellisense之外，使用接口/类/映射的真正好处是什么

使用接口和类不仅可以提供intellisense，还可以为代码提供静态类型安全性。为什么这很重要，假设您有一个具有以下结构的接口

导出接口演示{
字段：字符串；
}
//在另一个文件1中
demo.field.substring（1,2）；
//在另一个文件2中
demo.field.lenght；

您在代码中的许多地方都在使用此接口。现在，出于某种原因，您知道属性应该是

number

而不是

string

。所以这里typescript只在编译时提供所有错误

导出接口演示{
字段：数字；
}
//在另一个文件1中
demo.field.substring（1，2）；//错误
//在另一个文件2中
demo.field.lenght//错误

另外，在

typescript

传输文件后，它将生成

javascript

文件，现在由于

javascript

是解释语言，在

javascript

运行时实际执行有问题的行之前，您的代码不会被测试，但在typescript中，您只会在编译阶段出错

您可以在任何地方使用

any

，但这样您将丢失静态键入

通过接口和类，您还可以获得OOP特性，如继承等

它与数据传播有关吗

前端永远不知道将从

api

接收什么类型的数据。因此，开发人员有责任将接收到的数据映射到某个接口

同样如上所述，若后端以某种方式更改了接收的

json

中某个字段的类型，那个么它将再次在编译时被捕获

如果

forkJoin

组合了两个

json

s的输出，则可以有两种不同的类型

导出接口演示1{
字段1：字符串；
}
导出接口演示2{
字段2：编号；
}
//在服务层
getData（）：可观察{
const res1=this.http.get（…）；
const res2=this.http.get（…）；
返回forkJoin（[res1，res2]）；
}
//组件中
this.dataService.getData（）.subscribe（res=>{
//您将在此处获得res的类型安全和智能感知
console.log（res[0].field1）
})

我没有使用接口，我应该这样做

---

是的，您应该使用

接口

，如果您没有使用

类型脚本

的功能，那么使用它有什么意义呢

您能否发布

forkJoin（[shortPlot，fullPlot]）返回的值订阅后？@Plochie我用log@Plochie，你看到我的编辑了吗？很好的回答@Plochie，谢谢你（很抱歉耽搁了）没问题。很高兴这很有帮助。很抱歉@Plochie，但即使按照您的指示，如果我这样写的话，我也会得到未定义的日志：
this.movieService.getMovies（'Robocop'）.subscribe（res=>{console.log（res[0].title]）但如果我这样记录：
this.movieService.getMovies（'Robocop'）.subscribe（res=>{console.log（res[0]['Title']））}）我得到了正确的日志…我已经按照您的建议实现了服务，但仍然…接口和响应之间的唯一区别是，在接口中，我没有字段名，字段名应该与key完全相同，因此res[0]。Title应该可以工作。
 <div *ngFor="let m of movies">

<h5 class="mt-0">{{m.Title}}, {{m.Year}}</h5>
</div>