Question

新开发者在这里。使用Angular 7并使用mat-option列出添加到数据库的名称。单击该字段时，名称看起来很好，但是当您尝试选择名称时，什么也没有发生。

从HTML：

<form #f="ngForm" (ngSubmit)="onSubmit()" [formGroup]="leaderratingForm">
    <div>
        <div>
            <mat-form-field>
                <mat-select placeholder="Select a Leader" formControlName="LeaderId" required>
                    <mat-option *ngFor="let leaderId of leaders" [value]="leaderId.LeaderId">{{leaderId.LeaderName}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
     </div>
</form>

从控制器中：

export class LeaderratingCreateComponent implements OnInit {

  leaderratingForm: FormGroup;
  leaders: Leader[];

  constructor(private _leaderratingService: LeaderratingService, private _form: FormBuilder, private _router: Router, private leaderService: LeaderService) { 
    this.createForm();
  }

  ngOnInit() {
    this.leaderService.getLeaders().subscribe((leaders: Leader[]) => {this.leaders = leaders; });
  }

  createForm() {
    this.leaderratingForm = this._form.group({
    LeaderID: new FormControl,
    SpeakingAbilityRating: new FormControl,
    EngagingRating: new FormControl,
    AuthenticRating: new FormControl,
    RapportRating: new FormControl,
    });
  }

这与我在其他地方使用的用于相同组件的代码完全相同，该组件实际上按预期工作（有下拉菜单，可以选择）。谢谢！

Answer 1

据我所知，模板和组件与Leader属性名称存在一些不一致。

您的组件中有LeaderID，而模板中有LeaderId。这应该会导致错误，因为您在formControlName="LeaderId"中输入了<mat-select>（而不是LeaderID）。

您会得到类似的东西：

找不到名称为“ LeaderId”的控件

如果更改元素后仍然无法选择元素，请检查您的Leader类/接口是否也一致：[value]="leaderId.LeaderId"类时，您可能正在尝试访问Leader / interface改为具有LeaderID属性

希望有帮助：）

Mat-Option显示选项，但单击时不选择

1 个答案: