- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我的组件出现这个错误,不知道该怎么办?
这是组件:
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": "user@domain.com",
"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": "user@domain.com",
"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": [
"one@example.com",
"two@example.com"
]
}
虽然实际上很可能
[
"one@example.com",
"two@example.com"
]
所以你需要要么
this.results = data.results
, 或string[]
关于 Angular :错误 TS2322:类型 'ItemsResponse' 不可分配给类型 'string[]',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47560868/
我的组件出现这个错误,不知道该怎么办? 这是组件: import { Component, OnInit } from '@angular/core'; import { HttpClient } f
我是一名优秀的程序员,十分优秀!