Angular 下拉列表未呈现

Question

似乎我有另一个数据问题，我的垫子 select 没有显示在肌肉组名称上，即使我的 API 调用正在将数据库拉到我的组件。我确定我遗漏的任何东西都可能非常简单，所以希望有人能发现它。

我知道代码中的其他问题，例如我的表单和其他一些问题，现在只是试图让数据显示。

HTML:

<p>add-exercise works!</p>

<form class="contentContainer" [formGroup]="editFieldsForm" (ngSubmit)="submitEdit()">
    <div fxLayout="column">
        <div fxLayout="row"
            fxLayoutGap="20px"
            fxlaypitAlign="space-between"
            fxjLayout.sm="column"
            fxLayout.xs="column">
            <div fxFlex="1 1 auto">
                <mat-form-field class="fullWidthField">
                    <mat-label>Exercise Name</mat-label>
                    <input type="text" matInput formControlName="exerciseName" required/> 
                </mat-form-field>
            </div>

            <div fxFlex="1 1 auto">
                <mat-form-field appearance="fill">
                    <mat-label>Muscle Group</mat-label>
                    <mat-select>
                    <mat-option *ngFor="let muscleGroup of muscleGroups" [Value]="muscleGroup">
                        {{muscleGroup}}
                    </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

        </div>
    </div>
    <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="25px">
        <div>
            <button type="submit" mat-raised-button [disabled]="editFieldsForm.invalid">Submit</button>
        </div>
        <div>
            <button type="button" mat-raised-button (click)="cancelEdit()">Cancel</button>
        </div>
    </div>
</form>

TS

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { finalize } from 'rxjs/operators';

import { IExercises } from 'src/app/models/IExcercises';
import { IMuscleGroups } from 'src/app/models/IMuscleGroups';
import { WorkoutService } from 'src/app/services/workout.services';

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

  @Input() exerciseData: IExercises;
  @Output() editClosed = new EventEmitter();
  @Output() recordUpdated = new EventEmitter<boolean>();
  saving = false;
  updatedexerciseData: IExercises;
  errorMessage = '';
  isLoadingData = false;

  muscleGroup = {} as IMuscleGroups[];

  editFieldsForm: FormGroup;

  constructor(private workoutService: WorkoutService) {   }

  ngOnInit() {
    this.loadDropdown();

    this.editFieldsForm = new FormGroup({
      exerciseName: new FormControl(this.exerciseData.exerciseName, Validators.compose([Validators.required, Validators.maxLength(40)]))
    });
   }

  submitEdit() {
    this.saving = true;
    try {
      this.updatedexerciseData = this.updatedexerciseData;
      this.updatedexerciseData.exerciseId = -1;
      this.updatedexerciseData.exerciseName = this.editFieldsForm.get('exerciseName').value;
      //this.updatedexerciseData.muscleGroupId = getMuscleGroupId(this.editFieldsForm.get('muscleGroupName').value);
    }
    catch (error) {
      console.error(error);
      this.errorMessage = 'An error prevented the record from being submitted.';
      this.saving = false;
      return;
    } 

    this.workoutService.updateExercises(this.updatedexerciseData)
    .pipe(
      finalize(() => { this.saving = false })
    )
    .subscribe(
      () => this.completeFormSubmission(),
      (error: Error) => this.errorMessage = error.message
    );
  }

  completeFormSubmission() {
    this.editClosed.emit();
    this.recordUpdated.emit(true);
  }

  cancelEdit() {
    this.editClosed.emit();
  }

  loadDropdown() {
    this.workoutService.getMuscleGroups().pipe(
      finalize(() => this.isLoadingData = false)
    )
      .subscribe((muscleGroupsData: IMuscleGroups[]) => {
        this.muscleGroup = muscleGroupsData;
        console.log(this.muscleGroup);
      },
        (error: Error) => this.errorMessage = error.message);
    }
}

Answer 1

问题 1：`muscleGroups`

的命名错误

作为评论中的解释，在 HTML 中，您正在迭代 muscleGroups 以生成 <mat-option>.

<mat-option *ngFor="let muscleGroup of muscleGroups" [Value]="muscleGroup">
  {{muscleGroup}}
</mat-option>

但是在 AddExerciseComponent 中找不到 muscleGroups 变量。您将变量命名为 muscleGroup.

问题 2：`[Value]` 不是 `<mat-option>`

的有效输入属性

您将在 <mat-option> 中使用 [Value] 时收到此错误消息：

Can't bind to 'Value' since it isn't a known property of 'mat-option'.

解决方案

在 AddExerciseComponent 中将 muscleGroup 重命名为 muscleGroups。
为 <mat-option> 更改为 [value]。
（可选）不与 {{muscleGroup}} 一起显示。这将在 HTML 中显示 [object Object]。从 muscleGroup 显示指定属性或使用 json 管道显示完整对象。

add-exercise.component.ts

<mat-option *ngFor="let muscleGroup of muscleGroups" [value]="muscleGroup">
  {{muscleGroup | json}}
</mat-option>

add-exercise.component.ts

export class AddExerciseComponent implements OnInit {

  ...

  muscleGroups = {} as IMuscleGroups[];

  loadDropdown() {
    this.workoutService
      .getMuscleGroups()
      .pipe(finalize(() => (this.isLoadingData = false)))
      .subscribe(
        (muscleGroupsData: IMuscleGroups[]) => {
          this.muscleGroups = muscleGroupsData;
          console.log(this.muscleGroups);
        },
        (error: Error) => (this.errorMessage = error.message)
      );
  }
}

Sample Solution on StackBlitz

Angular 下拉列表未呈现

Angular Dropdown not Rendering

angular

mat-select

问题 1：muscleGroups

问题 2：[Value] 不是 <mat-option>

解决方案

问题 1：`muscleGroups`

问题 2：`[Value]` 不是 `<mat-option>`