0

尽管我的 API 调用正在将数据库拉到我的组件中，但我似乎在肌肉组名称上没有显示我的 mat-select 的另一个数据问题。我确定我缺少的任何东西都可能非常简单，所以希望有人能发现它。

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

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);
    }
}
4

1 回答 1

0

问题 1：错误命名muscleGroups

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

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

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

问题 2：[Value]不是有效的 Input 属性<mat-option>

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

无法绑定到“Value”，因为它不是“mat-option”的已知属性。

解决方案

  1. 重命名muscleGroup为muscleGroupsin AddExerciseComponent。
  2. 更改为[value]for <mat-option>。
  3. （可选）不与 一起显示{{muscleGroup}}。这将以[object Object]HTML 格式显示。显示指定属性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)
      );
  }
}

StackBlitz 上的示例解决方案

于 2021-08-24T04:28:09.163 回答