[英]Angular2 typescript error TS2339: Property 'x' does not exist on type 'Y'
[英]error TS2339: Property 'x' does not exist on type 'y[]
请给出一个解决方案。 我的AuthorApi
接口有: total
、 per_page
、 data
但我无法在list
组件上访问它。
为什么显示错误? 而且,这是什么意思? 我无法理解它是什么。
在我的 Author.model.ts
export interface AuthorApi {
data: Author[];
total: number;
per_page: number;
}
export interface Author {
id: string;
name: string;
email: string;
qualification: string;
}
在我的 author.service.ts
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
@Injectable({
providedIn: "root"
})
export class AuthorService {
url = "http://localhost:8000";
constructor(http: HttpClient) {}
getAuthors() {
return this.http.get(`${this.url}/api/Author`);
}
getAuthorsByPage(page: number) {
return this.http.get(`${this.url}/api/Author?page=${page + 1}`);
}
getAuthorById(id) {
return this.http.get(`${this.url}/api/Author/${id}`);
}
addAuthor(name, email, qualification) {
const author = {
name: name,
email: email,
qualification: qualification
};
return this.http.post(`${this.url}/api/Author`, author, {
responseType: "json"
});
}
updateAuthor(id, name, email, qualifiation) {
const author = {
name: name,
email: email,
qualifiation: qualifiation
};
return this.http.put(`${this.url}/api/Author/${id}`, author, {
responseType: "json"
});
}
deleteAuthor(id) {
return this.http.delete(`${this.url}/api/Author/${id}`, {
responseType: "json"
});
}
// getAuthorsByUrl(uri: string){
// return this.http.get(`${uri}`);
// }
}
在我的 list.component.ts
import { Component, AfterViewInit, ViewChild } from "@angular/core";
import {
MatSnackBar,
MatPaginator,
MatTableDataSource,
MatSort
} from "@angular/material";
import { Author, AuthorApi } from "../../Module/author.model";
import { AuthorService } from "../../Shared/author.service";
@Component({
selector: "app-list",
templateUrl: "./list.component.html",
styleUrls: ["./list.component.css"]
})
export class ListComponent implements AfterViewInit {
authors: Author[];
authorsApi: AuthorApi[];
resultsLength = 0;
perPage = 0;
isLoadingResults = true;
isRateLimitReached = false;
displayedColumns = [
"Id",
"name",
"email",
"qualification",
"created_at",
"actions"
];
constructor(authorService: AuthorService, snackbar: MatSnackBar) {}
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
ngAfterViewInit() {
this.getAuthors();
// this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
}
getAuthors() {
console.log("Getting Data...");
this.isLoadingResults = true;
this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
this.authorService
.getAuthorsByPage(this.paginator.pageIndex)
.subscribe((data: AuthorApi[]) => {
this.authorsApi = data;
this.resultsLength = data.total;
this.perPage = data.per_page;
this.authors = data.data;
this.isLoadingResults = false;
console.log(data);
console.log(this.authorsApi);
});
}
deleteAuthor(id) {
this.authorService.deleteAuthor(id).subscribe(() => {
this.snackbar.open("Author Has Deleted Successfully !", "OK", {
duration: 5000
});
this.getAuthors();
});
}
}
我的程序正在运行,但出现此错误
ERROR in
src/app/Author/list/list.component.ts(51,35): error TS2339: Property 'total' does not exist on type 'AuthorApi[]'.
src/app/Author/list/list.component.ts(52,29): error TS2339: Property 'per_page' does not exist on type 'AuthorApi[]'.
src/app/Author/list/list.component.ts(53,29): error TS2339: Property 'data' does not exist on type 'AuthorApi[]'.
对于这些行, data
是一个AuthorApi
数组,但您正在尝试访问AuthorApi
接口中存在的AuthorApi
。
.subscribe((data: AuthorApi[]) => {
...
this.resultsLength = data.total;
this.perPage = data.per_page;
this.authors = data.data;
}
您将不得不进行其他调整,但如果返回的数据是一个数组,那么您很可能必须遍历结果以获取您想要的那些属性。
data
是AuthorApi[]
类型,即AuthorApi
数组。 虽然您使用的属性存在于AuthorApi
但它们不存在于数组中。 我认为您输入的数据有误,应该只是AuthorApi
。 尝试将其注销并查看它的外观。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.