首页 文章

可以't bind to ' someProperty ' since it isn'在Angular 5中'someComponent'的已知属性

提问于
浏览 次
0

在Angular 5 app中我使用以下组件：

import {
  Component,
  OnInit,
  Input,
  forwardRef
} from '@angular/core';
import {
  ControlValueAccessor,
  NG_VALUE_ACCESSOR
} from '@angular/forms';

@Component({
  selector: 'int-switcher',
  templateUrl: './switcher.component.html',
  styleUrls: ['./switcher.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => SwitcherComponent),
      multi: true
    }
  ]
})
export class SwitcherComponent implements OnInit, ControlValueAccessor {
  @Input() _value: boolean;
  get value() {
      return this._value;
  }
  set value(val) {
      this._value = val;
      this.propagateChange(this._value);
  }
  constructor() {}

  ngOnInit() {}
  writeValue(value: any): void {
    if (value !== undefined) {
      this._value = value;
    }
  }
  propagateChange = (_: any) => {};
  registerOnChange(fn: any): void {
      this.propagateChange = fn;
  }
  registerOnTouched(fn: any): void {}
  toggleValue() {
    this.value = !this.value;
    this.propagateChange(this.value);
  }
}

和模板：

<div class="switcher" (click)="toggleValue()">
  <div class="switcher-label"><ng-content></ng-content></div>
  <div class="switch">
    <input class="switch-input" type="checkbox" [(ngModel)]="value">
    <label class="switch-label switch-paddle"></label>
  </div>
</div>

我正在尝试设置此属性的值，但是我收到以下错误：

无法绑定到'value'，因为它不是'int-switcher'的已知属性 . 如果'int-switcher'是一个Angular组件并且它有'value'输入，那么请验证它是否是该模块的一部分 . 如果'int-switcher'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息 . 要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas” .

我试图做以下事情：

<int-switcher name="groupHotel" formControlName="groupHotel" (click)="setGrouping($event)" [value]="isGrouped">

并在ngInit中：

isGrouped: boolean;
  ngOnInit(): void {
    this.isGrouped = true;
}

为什么我不能绑定这个属性？

typescript binding components angular5

1 回答

  • -1

    您的@Input设置为下划线值，而不是 @Input value ，您的问题就在那里 . 您希望确保 @Input <name> 与您在使用组件/指令时使用的内容相匹配 .

    最简单的未经测试的例子;

    import { Component } from '@angular/core';

@Component({
  selector: 'color-component',
  template: `<div>{{color}}</div>` 
})
export class ColorComponent {
  @Input() color: string;
}

    然后当你使用该组件

    <color-component [color]="blue"</color-component>
    回复于

相关问题