Question

我创建了两个（2）表

Laravel：

短代码

class Shortcode extends Model
{
protected $table = 'short_code';

protected $fillable = [
    'name', 
    'descriptions',
    'telco_id',
    'created_at', 

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

电信公司

class Telco extends Model
{
protected $table = 'telco';

protected $fillable = [
  'name' ,
  'deascription',
  'country',
  'created_at',
];      

public function shortcode()
{
  return $this->hasMany('App\ShortCode');
}     
}

控制器

    public function indexShortcode()
{
    if(Auth::user()->id == 1)
        $shortcodes = Shortcode::all();
    else 
        $shortcodes = Shortcode::where('user_id',Auth::user()->id)->get();       
}

API路由

Route::get('indexShortcode', 'ApiController@indexShortcode');

我正在使用Angular 7从Laravel 5.8 API获取端点。我想显示电话表中的名称（值而不是键）。 short_code是主表。

我已经创建了model.ts，service.ts component.ts和component.html

角度

型号：简码

 import { User } from '../models/user';
 import { Telco } from '../models/telco';

 export class Shortcode {
 id: number;
 name: string;
 description: string;
 telco_id: number;
 telco?: Telco;   

constructor() {}
}

shortcode.service.ts

import { Shortcode } from '../models/shortcode';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from 'src/environments/environment.prod';
import { HttpErrorHandler, HandleError } from '../shared/_services/http- handle-error.service';

@Injectable({
  providedIn: 'root'
})

export class ShortcodeService {

private readonly apiUrl = environment.apiUrl;
private shortcodeUrl = this.apiUrl;
private handleError: HandleError;  

constructor(
private http: HttpClient,
httpErrorHandler: HttpErrorHandler ) {
  this.handleError = httpErrorHandler.createHandleError('ShortcodeService');
}

/** GET shortcodes from shortcodes endpoint */
getShortcodes (): Observable<Shortcode[]> {
 return this.http.get<Shortcode[]>(this.shortcodeUrl + '/indexShortcode')
.pipe(
  catchError(this.handleError('getShortcodes', []))
);
} 
}

shortcode.component.ts

    import { Component, OnInit } from '@angular/core';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';

import {ExcelService} from '../../../services/excel.service';
import { filter } from 'rxjs/operators';
import { ShortcodeService } from '../../../services/shortcode.service';
import { Router } from '@angular/router';
import { Shortcode } from '../../../models/shortcode';

@Component({
selector: 'app-sms-shortcode-my',
templateUrl: './sms-shortcode-my.component.html',
styleUrls: ['./sms-shortcode-my.component.scss']
})
export class SmsShortcodeMyComponent implements OnInit {

shortcodes: Shortcode[];
isLoading: Boolean = false;
public searchText: string; 
public filter: string; 
shortcodePosts: Shortcode[] = [];

constructor(
    private shortcodeService: ShortcodeService,
    private excelService:ExcelService, 
    private spinnerService: Ng4LoadingSpinnerService,) { }

ngOnInit() {

 // Get shortcode detail
 this.getShortcodes();
}

ngOnDestroy(): void {
document.body.className = '';
}


 getShortcodes(): void {
// this.isLoading = true;
this.spinnerService.show();
this.shortcodeService.getShortcodes()
  .subscribe(
    response => this.handleResponse(response),
    error => this.handleError(error),
    ()=>this.spinnerService.hide()
    );
 }

protected handleResponse(response: Shortcode[]) {
  this.isLoading = false,
  this.shortcodes = response;
 }
 protected handleError(error: any) {
this.isLoading = false,
console.error(error);
 }  
 }

shortcode.component，html

                      <tr  *ngFor="let shortcode of shortcodes; let i = index">
                    <td>{{i + 1}}</td>
                  <td>{{shortcode?.name}}</td>
                  <td>{{shortcode?.description}}</td>
                  <td>{{shortcode?.telco?.name}}</td>                               
              </tr>

我用过

{{shortcode？.telco？.name}}

显示电话公司名称（外键值），而不是

{{shortcode？.telco_id}}

，但未显示任何内容。我检查了控制台，那里什么也没有。

请问我在哪里弄错了，我该怎么办？

Answer 1

您必须渴望建立联系，

public function indexShortcode()
{
     if(Auth::user()->id == 1)
        $shortcodes = Shortcode::with('telco')->get();
    else 
        $shortcodes = Shortcode::with('telco')->where('user_id',Auth::user()->id)->get();       
}

现在，您可以访问以下名称：

shortcode.telco.name

角度-如何显示外键值而不是ID

1 个答案: