angular - Angular - 类型“IStudent []”上不存在属性“结果”

Question

在 Angular-12 中，我想从模式中的单个列中显示所选学生的详细信息：

API JSON 端点：

该列表给出：

{
  "message": "Students successfully Retrieved.",
  "error": false,
  "code": 200,
  "results": {
    "students": [{
        "id": 1,
        "first_name": "Afam",
        "middle_name": "O",
        "last_name": "Kosi",
      },
      {
        "id": 2,
        "first_name": "Akudo",
        "middle_name": "J",
        "last_name": "Lamptey",
      }
    ]
  }
}

对于我要选择的行的详细信息，我有：

{
  "message": "Student Detail.",
  "error": false,
  "code": 200,
  "results": {
    "student": [{
      "id": 1,
      "first_name": "Afam",
      "middle_name": "O",
      "last_name": "Kosi",
    }]
  }
}

我有这个界面（学生）：

export interface IStudent {
  id ? : number;
  first_name: string;
  middle_name: string;
  last_name: string;
}

然后服务：

import {
  IStudent
} from 'src/app/models/student.model';

public getAllStudents(): Observable < any > {
  return this.http.get(this.api.baseURL + 'students/list', this.httpOptions);
}

getStudentById(id: number): Observable < IStudent[] > {
  return this.http.get < IStudent[] > (this.api.baseURL + 'students/fetchbyid/' + id, this.httpOptions);
}

然后是 HTML 和组件：

<ng-template #actionTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
  <a class="btn btn-primary btn-sm" (click)="viewStudent(row)" data-toggle="modal" data-target="#viewStudentModal">
                        View
                      </a>&nbsp;
</ng-template>


<div class="modal fade" id="viewStudentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form class="form-horizontal">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="row">
                <div class="col-lg-4">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">First Name</label>

                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Midle Name</label>

                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Last Name</label>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="hide()">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>

从上面看，当用户单击选择行时，学生列表中的 viewStudent(row) 会显示视图详细信息模式，并且还指向下面的此组件：

import { IStudent } from 'src/app/models/student.model'; 
import { StudentService } from 'src/app/services/student.service'; 

studentDetail!: IStudent; 

constructor( private studentService: StudentService, private router: Router, ) { } 

viewStudent(row: any) {
 this.studentService.getStudentById(row).subscribe(
  data => {
    this.studentDetail = data.results.student;
  },
  error => {
    this.store.dispatch(loadErrorMessagesSuccess(error));
  }
 );
}

它假设要获取所选学生的行的详细信息，但我收到了这个错误：

“IStudent []”类型上不存在属性“结果”

这是突出显示的 data.results.student

当我这样做时：

viewStudent(row: any) {
   console.log(row);
}

我有：

学生：{id：1，名字：“Afam”，中间名：“O”，姓氏：“Kosi”}

如何解决此错误以显示详细信息？

谢谢

标签： angular

Answer 1

根据您的响应示例，您的 API 响应不仅仅是一个Student，而是一个object包含IStudent. 所以，为了模仿这个，你可以有这样的东西：

export interface IStudent {
  id?: number;
  first_name: string;
  middle_name: string;
  last_name: string;
}

export interface Results { // random name
  student: IStudent[];
}

export interface StudentResponse { // random name
  message: string;
  error: boolean;
  code: number;
  results: Results;
}

所以在你的getStudentById：

getStudentById(id: number): Observable<StudentResponse> {
  return this.http.get<StudentResponse>(this.api.baseURL + 'students/fetchbyid/' + id, this.httpOptions);
}

请注意，如果您只关心Student，则可以在 中执行以下操作getStudentById：

getStudentById(id: number): Observable<IStudent> {
  return this.http.get<StudentResponse>(this.api.baseURL + 'students/fetchbyid/' + id, this.httpOptions).pipe(
    map(({ results: { 0: student }}) => student),
  );
}