Angular :错误 TS2322:类型 'ItemsResponse' 不可分配给类型 'string[]'

我的组件出现此错误，不知道该怎么办？

这是组件:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

export class EmailsComponent implements OnInit {

test = 'test';
results: string[];

  constructor(private http: HttpClient) { }

  ngOnInit() {

    interface ItemsResponse {
      results: string[];
    }

    this.http.get<ItemsResponse>('assets/api/email_list.json').subscribe(data => {
      this.results = data;
      console.log(this.results);
    });
  }

}

然后我收到这个错误，奇怪的是，即使出现错误，浏览器也能正常工作？

ERROR in src/app/components/emails/emails.component.ts(24,7): error TS2322: Type 'ItemsResponse' is not assignable to type 'string[]'.
src/app/components/emails/emails.component.ts(24,7): error TS2322: Type 'ItemsResponse' is not assignable to type 'string[]'.
  Property 'includes' is missing in type 'ItemsResponse'.

编辑:添加了 json 片段:

[
    {
        "pk": "wGR",
        "created": "2017-10-07T01:42:25.110747Z",
        "email_domain": "domain.com",
        "sender_name": null,
        "sender_email": "[email protected]",
        "has_user_viewed": false,
        "is_shielded": false
    }
]

添加这个以便我们知道我们在这方面的位置以及历史原因，所以我在这里学到了一些新东西!
当前版本:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

export class EmailsComponent implements OnInit {

results: ItemsResponse[]

  constructor(private http: HttpClient) { }

  ngOnInit() {

    interface ItemsResponse {
      pk: string;
      created: string;
      email_domain: string;
      sender_name: string;
      sender_email: string;
      has_user_viewed: boolean;
      is_shielded: boolean;
    }

    this.http.get<ItemsResponse>('assets/api/email_list.json').subscribe(data => {
      this.results = data.results;
      console.log(this.results);
    });
  }

}

最佳答案

编辑

现在我们有了数据结构:

[
    {
        "pk": "wGR",
        "created": "2017-10-07T01:42:25.110747Z",
        "email_domain": "domain.com",
        "sender_name": null,
        "sender_email": "[email protected]",
        "has_user_viewed": false,
        "is_shielded": false
    }
]

你可能应该创建一个这样的界面:

interface ItemsResponse {
  pk: string;
  created: string;
  email_domain: string;
  sender_name: string;
  sender_email: string;
  has_user_viewed: boolean;
  is_shielded: boolean;
}

并将 results 的定义更改为 results: ItemsResponse[] 。

这意味着 this.results 将是一个数组，每个元素都是一个 ItemsResponse 对象。

请求完成后，您将能够按预期访问它:

this.results[0]["sender_email"]
this.results[12]["pk"]
this.results.map(item => console.log(item.pk))

等等。

请注意，在我的界面中，我仅将 string 用于 pk 字段，但是如果您的可能值集有限，例如 "wGR", "wGA", "wGP"，您可以使用字符串枚举类型，如下所示:

interface ItemsResponse {
  pk: "wGR" | "wGA" | "wGP";
  // ...
}

但是，要明确解释为什么会出现错误，您不能将 ItemsResponse 转换为 string[] ，这就是您通过将 get 请求的响应断言为 <ItemsResponse> 所做的(这样做会告诉类型检查器 data 将是 ItemsResponse )，但是您随后将其分配给 this.results，您已将其声明为 string[] 。希望上面的插图说明为什么这不起作用。

原版

您有一个类型接口(interface)，它定义了一个名为 results 的字段:

interface ItemsResponse {
  results: string[];
}

在您的服务中，您将 email_list.json 转换为 <ItemsResponse> :

this.http.get<ItemsResponse>('assets/api/email_list.json').subscribe(data => {
  this.results = data;
  console.log(this.results);
});

这意味着它期望 email_list.json 看起来像这样:

{
  "results": [
    "[email protected]",
    "[email protected]"
  ]
}

虽然实际上很可能

[
  "[email protected]",
  "[email protected]"
]

所以你需要要么

将其分配为 this.results = data.results 或

将类型接口(interface)更改为简单的 string[]

关于 Angular :错误 TS2322:类型 'ItemsResponse' 不可分配给类型 'string[]'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47560868/