类型 A 缺少类型 B 的以下属性：a、b

Question

I'm having difficulties to fix this bug:

Type 'Mahasiswa[]' is missing the following properties from type 'MahasiswaResult': info, result

What I'm trying to do here is to do GET request and get the data to the HTML below. Here is the user-detail.component.html :

<div class="container-fluid pt-3 pb-3">
<p>Current NIM: {{currentNIM}}</p>
<p>Ini Halaman Detailnya Khusus Untuk ::</p>
<p>{{ mahasiswa.result.alamat }} ~~ {{ mahasiswa.result.nama_lengkap }} -- {{ mahasiswa.result.email }}</p>

Here are the codes linked to the HTML: user-detail.component.ts :

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PelayanApiService } from '../_shared/services/pelayan-api.service';
import { MahasiswaResult } from '../_shared/models/mahasiswa-result';
@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.css']
})
export class UserDetailComponent implements OnInit {
  public mahasiswa: MahasiswaResult;
  currentNIM: string;
  constructor(private pelayan: PelayanApiService, 
              public activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.currentNIM = this.activatedRoute.snapshot.paramMap.get("nim");
    this.pelayan.getMahasiswaByNim(this.currentNIM).subscribe(result => {this.mahasiswa = result; console.log(this.mahasiswa)});
  }

}

pelayan-api.service.ts :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

import { Mahasiswa } from '../models/mahasiswa';
@Injectable({
  providedIn: 'root'
})
export class PelayanApiService {

  private apiDocumentation = 'https://documenter.getpostman.com/view/5658787/SW7W5pjd';
  private urlApi = 'https://umn-pti2019.herokuapp.com';

  constructor(private http: HttpClient) { }

  getAllMahasiswa(): Observable<Mahasiswa> {
    return this.http.get<Mahasiswa>(`${this.urlApi}/api/mahasiswa`);
  }
  getMahasiswaByNim(nim: string): Observable<Mahasiswa[]> {
    return this.http.get<Mahasiswa[]>(`${this.urlApi}/api/mahasiswa/${nim}`);
  }
}

mahasiswa-result.ts :

export interface MahasiswaResult {
    info: string;
    result: {
        alamat: string;
        angkatan: string;
        created_at: string;
        email: string;
        foto: string;
        id: string;
        nama_lengkap: string;
        nim: string;
        prodi: string;
        tanggal_lahir: string;
        telepon: string;
        updated_at: string;
    };
}

Here is the example of the API fetched:

{"info":"Univ Student 🤔","result":{"id":"1","nim":"13536","email":"aaa@gmail.com","nama_lengkap":"aaa","foto":"https://i.pximg.net/img-original/img/2019/11/07/03/56/06/77690982_p0.png","created_at":"1573751507000","updated_at":"1573764954857","telepon":"0818181818181","alamat":"Sleman, Yogyakarta","prodi":"Inf","tanggal_lahir":"1995-08-21","angkatan":"2014"}}

Answer 1

You are returning Mahasiswa[] from the function below in the service

getMahasiswaByNim(nim: string): Observable<Mahasiswa[]> {
    return this.http.get<Mahasiswa[]>(`${this.urlApi}/api/mahasiswa/${nim}`);
}

try changing it to

getMahasiswaByNim(nim: string): Observable<MahasiswaResult> {
    return this.http.get<MahasiswaResult>(`${this.urlApi}/api/mahasiswa/${nim}`);
}