Kann nicht binden 'someProperty', da es nicht eine bekannte Eigenschaft von 'someComponent' ist in Schräg 5

Question

In Angular 5 app ich folgende Komponente bin mit:

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

Und Vorlage:

<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> 

ich versuche, den Wert für diese Eigenschaft zu setzen, aber ich bekomme die folgende Fehlermeldung:

Can't bind to 'value' since it isn't a known property of 'int-switcher'.

1. If 'int-switcher' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'int-switcher' 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.

ich habe versucht, die follo zu tun Flügel:

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

und in ngInit:

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

Warum kann ich nicht auf diese Eigenschaft binden?

Answer 1

Ihr @Input ist auf Unterstrich Wert gesetzt, nicht @Input value, Ihr Problem liegt dort. Sie möchten sicherstellen, dass Ihr @Input <name> mit dem übereinstimmt, was Sie verwenden, wenn Sie Ihre Komponente/Direktive verwenden.

Einfachstes ungetestetes Beispiel;

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

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

dann, wenn Sie die Komponente

<color-component [color]="blue"</color-component>