在 mat-select 中传递选项

Question

我在 create.form.component.ts 中创建了一个选择选项数组，并尝试在选择中传递它。 我无法将 optionsLegalType 从 <form-select> 传递到 select.component.html。帮帮我，我该怎么做？我的代码如下。

错误

Uncaught Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'form-select'.
1. If 'form-select' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'form-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("l]="contractorForm.controls['legalType']" 
    [placeholder]="'Юридический тип контрагента'" 
    [ERROR ->][options]="optionsLegalType" 
    (onChanged)="formChanged()">
  </form-select>
"): ng:///AppModule/ContractorUpdateFormComponent.html@11:4
    at syntaxError (vendor.js:35539)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (vendor.js:53423)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (vendor.js:58969)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (vendor.js:58956)
    at vendor.js:58899
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (vendor.js:58899)
    at vendor.js:58809
    at Object.then (vendor.js:35530)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (vendor.js:58808)

select.component.html

<mat-form-field [formGroup]="parentForm">
    <mat-select [(value)]="value" [placeholder]="placeholder" [formControl]="control" (ngModelChange)="formChanged($event)">
        <mat-option *ngFor="let option of options" [value]="option.value">{{ option.name }}</mat-option>
    </mat-select>
</mat-form-field>

select.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, AbstractControl } from '@angular/forms';

@Component({
  selector: 'form-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.scss']
})

export class SelectComponent {
  @Input() public parentForm: FormGroup;
  @Output() public onChanged = new EventEmitter<boolean>();
  @Input() control: AbstractControl;
  @Input() placeholder: string;
  // @Input() options;
  @Input() value: any;

  constructor() {
  }

  hasError(controlName: string, errorName: string) {
    return this.parentForm.controls[controlName].hasError(errorName);
  }

  formChanged(event: any) {
    this.onChanged.emit(event);
  }
}

create-form.component.html

  <form-select 
    [parentForm]="contractorForm" 
    [control]="contractorForm.controls['legalType']" 
    [placeholder]="'Юридический тип контрагента'" 
    [options]="optionsLegalType" 
    (onChanged)="formChanged()">
  </form-select>

create-form.component.ts（部分代码）

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

    export class ContractorCreateFormComponent {
        public isElementVisible: boolean = false;
        contractorForm: FormGroup;
        public optionsLegalType = [
            {
                value: 'PhysicalPerson',
                name: 'Физическое лицо',
            },
            {
                value: 'Entity',
                name: 'Юридическое лицо',
            }
        ];
        @Input() public contractor: ContractorViewModel;

        constructor(
            private router: Router,
            private agentHttpService: ContractorsHttpService,
            private contractorFormBuilder: FormBuilderService,
            private snackBar: MatSnackBar) {
            let contractor = new ContractorViewModel();
            this.contractorForm = this.contractorFormBuilder.buildFormContractor(contractor);
        }

Answer 1

您确实注释掉了 select.component.ts 中的 @Input() options。所以是的，它不是一个有效的属性。

Answer 2

我发现了一个错误。在 select.component.ts 中必须是这个代码。

  @Input() options;
  @Input() value: any = this.options;