Question

请为此提供解决方案。我的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.serviece.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[]'.

Answer 1

对于这些行，data是AuthorApi的数组，但是您试图访问AuthorApi的接口中存在的属性。

.subscribe((data: AuthorApi[]) => {
  ... 
  this.resultsLength = data.total;
  this.perPage = data.per_page;
  this.authors = data.data;
}

您将不得不进行其他调整，但是如果返回的数据是一个数组，那么您很有可能必须遍历结果以获取所需的那些属性。

Answer 2

data的类型为AuthorApi[]，即AuthorApi的数组。虽然您使用的属性存在于AuthorApi上，但它们不存在于数组中。我认为您输入的数据有误，应该只是AuthorApi。尝试注销并查看它的外观。

错误TS2339：类型“ y []上不存在属性“ x”

2 个答案: