Django: получить данные внешнего ключа для отображения в Angular

Question

Я пытаюсь получить все столбцы таблицы через отношение внешнего ключа, и мне интересно, как это сделать. У меня есть следующий код:

models.py

class Athletes(models.Model):
    athlete_id = models.AutoField(db_column="AthleteID", primary_key="True")
    first_name = models.CharField(db_column='FirstName', max_length=100)
    last_name = models.CharField(db_column='LastName', max_length=100)

    def __str__(self):
        return str(self.athlete_id) + ' ' + self.first_name + ' ' + self.last_name

    class Meta:
        managed = True
        db_table = 'Athletes'
        ordering = ('athlete_id', ) 

class VelocityLoadPredict(models.Model):
    vl_predict_id = models.AutoField(db_column="vl_predict_id", primary_key="True")
    athlete_id = models.ForeignKey(Athletes, on_delete=models.CASCADE, db_column="athleteID")
    lift_name = models.CharField(db_column="LiftName", max_length=100)

    def __str__(self):
        return str(self.vl_predict_id) 

    class Meta:
        managed = True
        db_table = 'velocity_load_predict'
        ordering = ('vl_predict_id', )

И я использую сериализаторы:

class AthletesSerializer(serializers.ModelSerializer):
    class Meta: 
        model = Athletes
        fields = ('athlete_id', 'first_name', 'last_name')

class VelocityLoadPredictSerializer(serializers.ModelSerializer):
    class Meta:
        model = VelocityLoadPredict
        fields = ('vl_predict_id', 'athlete_id', 'lift_name')

В Angular у меня есть следующий код (api.service):

analytics.component.ts

  analytics: Analytics[];  constructor(private data: DataService,
    private api: ApiService) {
      this.getAnalytics();
    }
        getAnalytics = () => {
    this.api.getAnalytics().subscribe(
      data => {
        this.analytics = data;
      },
      error => {
        console.log(error);
      }
    );

Затем я хочу представить имя, фамилию и имя лифта в моем html-файле аналитики:

<p *ngFor='let element of analytics'>{{element.first_name}}</p>

Как мне поступить так, когда таблица Атлетов связана с внешним ключом athlete_id?

Спасибо!

ОБНОВЛЕНИЕ:

Как работать с Angular для представления имени спортсмена.First_name?

api.service.ts

  getVlPredict(): Observable<any> {
return this.http.get(this.baseurl + '/velocityloadpredict/',
{headers: this.httpHeaders});

}

analytics.component.ts

    vlpredict: string[] = [];

  workoutCalls: string[] = ['first_name', 'lift_name'];
  workoutNames: string[] = ['First Name', 'Lift Name'];

    constructor(private data: DataService,
        private api: ApiService) {
          this.getVlPredict();
        }

          getVlPredict = () => {
            this.api.getVlPredict().subscribe(
              data => {
                this.vlpredict = data;
              },
              error => {
                console.log(error);
              }
            );
          }

analytics.component.html

<div>
    <mat-table [dataSource]="vlpredict" class="mat-elevation-z8" matSort>   
        <ng-container matColumnDef="{{column}}" *ngFor="let column of workoutCalls; index as i">
            <mat-header-cell *matHeaderCellDef mat-sort-header>{{workoutNames[i]}}</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element[column]}}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="workoutCalls"></mat-header-row>
        <mat-row *matRowDef="let row; columns: workoutCalls"></mat-row>
    </mat-table>
</div>

Answer 1

Вы можете использовать sub serializer в вашем VelocityLoadPredictSerializer.

class VelocityLoadPredictSerializer(serializers.ModelSerializer):
    athlete = AthletesSerializer()  # this is sub serializer

    class Meta:
        model = VelocityLoadPredict
        fields = ('vl_predict_id', 'athlete_id', 'lift_name', 'athlete')

Тогда вы можете получить это.

{
  "vl_predict_id": 1,
  "lift_name": "blabla",
  "athlete": {
    "athlete_id": 2,
    "first_name": "blabla",
    "last_name": "blabla"
  },
  ...
}

Или вы хотите только first_name, вы можете использоватьsource

class VelocityLoadPredictSerializer(serializers.ModelSerializer):
    first_name = serializers.CharField(source='athlete.first_name')

    class Meta:
        model = VelocityLoadPredict
        fields = ('vl_predict_id', 'athlete_id', 'lift_name', 'first_name')

затем,

{
  "vl_predict_id": 1,
  "lift_name": "blabla",
  "first_name": "blabla",
  ...
}

Если вам нужна дополнительная информация, см. Django Rest Framework источник и отношение