Угловой: панель расширения матов не показывает все поля

Question

Я работаю над приложением с углом 8, где я хочу создать форму с параметрами, которые пользователь вводит при вводе, и, нажав на кнопку, она должна показать созданную форму или таблицу. Я думаю, что форму можно создать без каких-либо проблем, но она не отображает все поля. Что я делаю неправильно? Я пробовал так много сценариев, как изменение формы HTML, но ни один из них не был полезен. Он печатает только третье поле, которое является полем «описание». Все остальные поля экранируются или не регистрируются. Кто-нибудь, пожалуйста, может быть, может определить проблемы?

Это файл тренировки-list.component.html:

<mat-accordion multi=true *ngIf="exercises.length > 0">
    <mat-expansion-panel *ngFor="let element of exercises">
        <mat-expansion-panel-header>
            <mat-panel-title>
                {{element.workoutTitle}}
            </mat-panel-title>
        </mat-expansion-panel-header>

        <p>{{element.name}}</p>
        <p>{{element.description}}</p>
        <p>{{element.nrSets}}</p>
        <p>{{element.nrRepsTime}}</p>

        <mat-action-row>
            <button mat-button>EDIT</button>
            <button mat-button>DELETE</button>
        </mat-action-row>
    </mat-expansion-panel>
</mat-accordion>

<p class="info-text mat-body-1" *ngIf="exercises.length <= 0">
    No exercise added yet
</p>

Это файл тренировки-create.component.html:

<mat-card>
    <form (submit)="onAddExercise(exerciseForm)" #exerciseForm="ngForm">
        <mat-form-field>
            <input matInput type="text" ngModel required name="Workout Title" placeholder="Workout Title" #title="ngModel">
            <mat-error *ngIf="title.invalid">Required</mat-error>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Exercise</mat-label>
            <input matInput type="text" ngModel required name="exerciseName" #exerciseName="ngModel">
            <mat-error *ngIf="exerciseName.invalid">Required</mat-error>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Description</mat-label>
            <textarea matInput type="text" ngModel required name="description" #exerciseName="ngModel"></textarea>
            <mat-error *ngIf="exerciseName.invalid">Required.</mat-error>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Sets</mat-label>
            <input matInput type="number" ngModel required name="sets" #sets="ngModel">
            <mat-error *ngIf="sets.invalid">Required</mat-error>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Reps/Times</mat-label>
            <input matInput type="number" ngModel required name="repsTimes" #repsTimes="ngModel">
            <mat-error *ngIf="repsTimes.invalid">Required</mat-error>
        </mat-form-field>

        <br>
        <button mat-raised-button color="accent" type="submit">Save Workout</button>

    </form>
</mat-card>

Это упражнение-list.component.ts

import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { Exercise } from '../../models/exercise-model';
import { ExerciseService } from '../../services/exercise.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-exercise-list',
  templateUrl: './exercise-list.component.html',
  styleUrls: ['./exercise-list.component.css']
})
export class ExerciseListComponent implements OnInit, OnDestroy {

  exercises: Exercise[] = [];
  private exerciseSub: Subscription;

  constructor(public exerciseService: ExerciseService) {
  }

  ngOnInit() {
    this.exercises = this.exerciseService.getExercises();
    this.exerciseSub = this.exerciseService.getPostUpdateListener()
      .subscribe((exercises: Exercise[]) => {
        this.exercises = exercises;
      });
  }

  ngOnDestroy() {
    this.exerciseSub.unsubscribe();
  }
}

Это упражнение-create.component.ts

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { NgForm } from '@angular/forms';

import { Exercise } from '../../models/exercise-model';
import { ExerciseService } from 'src/app/services/exercise.service';

@Component({
  selector: 'app-exercise-create',
  templateUrl: './exercise-create.component.html',
  styleUrls: ['./exercise-create.component.css']
})

export class ExerciseCreateComponent implements OnInit {

  constructor(public exerciseService: ExerciseService) {
  }

  onAddExercise(form: NgForm) {
    if (form.invalid) { return; }

    this.exerciseService.addExercise(
      form.value.workoutTitle,
      form.value.name,
      form.value.description,
      form.value.nrSets,
      form.value.nrRepsTime);
    form.resetForm();
  }

  ngOnInit() { }

}

Это файл exercService.ts:

import { Injectable } from '@angular/core';
import { Exercise } from '../models/exercise-model';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ExerciseService {
  private exercises: Exercise[] = [];
  private exercisesUpdatd = new Subject<Exercise[]>();

  getExercises() {
    return [...this.exercises];
  }

  getPostUpdateListener() {
    return this.exercisesUpdatd.asObservable();
  }

  addExercise(workoutTitle: string, exerciseName: string, description: string, sets: number, repsTime: string) {
    const exercise: Exercise = {
      workoutTitle: workoutTitle,
      name: exerciseName,
      description: description,
      nrSets: sets,
      nrRepsTime: repsTime
    };
    this.exercises.push(exercise);
    this.exercisesUpdatd.next([...this.exercises]);
  }
}

Файл exerc.model.ts:

export interface Exercise {
  workoutTitle: string;
  name: string;
  description: string;
  nrSets: number;
  nrRepsTime: string;
}

Это результат визуально. Как видно, для всех полей введены данные, но отображается только описание.

Вот ссылка на стек Blitz: https://stackblitz.com/edit/angular-atf1vb