Wie übertrage ich Daten von Eltern zu Kind?

Question

Ich habe diese Eigenschaft in einer untergeordneten Komponente:

@Input() submitButtonDisabled: boolean; 

In der Vorlage meiner Elternkomponente stelle ich es über Immobilien-Bindung durch Interpolation:

<my-child-component 
    [submitButtonDisabled]="{{disableSubmitButton()}}"> 
</my-child-component> 

Das Kind Komponentenvorlage liest seine submitButtonDisabled Eigenschaft auf diese Weise:

<button id="btSubmit" type="submit" (click)="submit()" 
    [disabled]="submitButtonDisabled">Ok</button> 

Debuggen meiner maschinenschriftlichen Code Ich sehe Eigenschaft Bindung funktioniert gut, aber die Schaltfläche "Senden" bleibt deaktiviert, egal was zurückgibt (ein boolescher Wert). Es scheint, dass die Komponente gerendert wird, bevor die Bindung stattfindet.

Macht das Sinn? Wo ist mein Fehler?

Referenz: Angular 2 - Component Communication

Answer 1

Wenn Sie vorbei ein Stringliteral auf Ihre Eingabe Eigenschaft, VERWENDEN SIE KEINE eckigen Klammern:

<my-comp isDisabled="yes"></my-comp> 
<my-comp isDisabled="no"></my-comp> 

In diesem Beispiel wird die Eingabeeigenschaft isDisabled wird die Zeichenfolge 'yes' oder 'no' enthalten.

Wenn Sie etwas anderes als ein Stringliteral vorbei sind, dann müssen Sie die eckigen Klammern verwenden:

<my-comp [isDisabled]="true"></my-comp> 
<my-comp [isDisabled]="false"></my-comp> 
<my-comp [isDisabled]="shouldItBeDisabled()"></my-comp> 

In diesem Beispiel, oder die boolean true oder false die Eingabeeigenschaft isDisabled enthält, der von der -Methode zurückgegebene Wert.

Beachten Sie, wie keiner dieser Szenarien {{ ... }} verwendet.

In Ihrem Fall könnte das Problem sein, dass Ihre Methode disableSubmitButton() nicht den richtigen Wert zurückgibt. (Auch, wie Ron537 sagte, sollten Sie die {{ ... }} fallen lassen.)

Answer 2

Sie die Doppel Klammer aus der Bindung zu entfernen. diese

[submitButtonDisabled]="{{disableSubmitButton()}}" 

Gebrauch::

Statt dessen

[submitButtonDisabled]="disableSubmitButton()" 

Oder diese:

submitButtonDisabled="{{disableSubmitButton()}}"