Angular-在Laravel后端显示外键值

时间:2019-07-18 07:28:00

标签: angular laravel api

我正在使用Laravel 5.8 Endpoint和Angular 7 Frontend开发结果管理系统。我想在结果视图中显示Exam_name而不是Id。

我已经开发了这两个表:

考试:ID,考试名称,用户ID结果:ID,考试ID,用户ID,得分。

考试模式

    protected $fillable = [
    'exam_name' ,
    'user_id'
];    


protected $guarded = [
    'id'
];  

public function user() {
    return $this->belongsTo('App\User');
}

public function results()
{
  return $this->hasMany(App\Result);
} 

结果模型

    protected $fillable = [
    'score', 
    'exam_id',
    'user_id'
    ];

protected $guarded = [
    'id'
]; 

public function exam() {
    return $this->belongsTo('App\Exam');
}  

public function user() {
    return $this->belongsTo('App\User');
}  

结果:Laravel端点

    public function indexResult()
{
        $results = Results::all();
    return $results;      
} 

角度:result.model.ts

import { User } from '../models/user';
import { Exam } from '../models/exam';

export class Result {
id: number;
score: string;
exam_id: numeric;
user_id: number;

user?: User;
exam?: Exam;

constructor() {}
}

角度:exam.model.ts

export class Result {
id: number;
exam_name: string;

constructor() {}
}

角度:result.service.ts

import { Result } from '../models/result';

getResults (): Observable<Result[]> {
return this.http.get<Result[]>(this.resultUrl + '/indexResult')
.pipe(
  catchError(this.handleError('getResults', []))
 );
 }

result-display.component.ts

import { ResultService } from '../../../services/result.service';
import { Router } from '@angular/router';
import { Result } from '../../../models/result';

export class ResultComponent implements OnInit {

result: Result[];

constructor(
private resultService: ResultService) { }

ngOnInit() { 
    this.getResults();    
}

getResults(): void {
this.resultService.getResults()
  .subscribe(
    response => this.handleResponse(response),
    error => this.handleError(error)
    );
}

result-display.component.html

      <tr  *ngFor="let result of results">
      <td>{{result.score}}</td>
      <td>{{result.exam_id}}</td>
    <td>
  1.   

    {{data.exam_id}}

  

result-display.component.html

我要显示的名字是“ exam_name”(来自考试表),而不是“ exam_id”。

我该如何实现?

0 个答案:

没有答案