Angular 5 @input（）對象屬性綁定錯誤

Question

我不確定是否收到錯誤：

***ERROR**: Can't bind to 'obj.Name' since it isn't a known property of 'comp'.*

是Angular不允許這種行為的結果。 目的只是綁定到@input對象屬性。 碼：

// comp.component.ts
...
@Input() obj: ObjType = {
Name: ''
}

// comp2.html
...
// this HTML is passing the value from comp2.html to comp component
<app-comp [obj.Name]="MyNameIs"></app-comp>

我希望將“ MyNameIs”值傳遞回obj.Name屬性，但出現上述錯誤。 這是我未正確執行的操作，還是Angular（v5）無法執行的操作？

Answer 1

@Input保留給父組件到子組件的屬性綁定。

例如： parent.component.ts應該包含一個屬性：

public myNameIs = { name: 'Marie Curie'};

parent.component.html父模板內部包括子組件並綁定到以下屬性：

<child-comp [obj]="MyNameIs"></child-comp>

child.component.ts在子組件內部，使用@Input裝飾器綁定到該屬性。

@Input() obj: ObjType = {}

child.component.html然后，您可以在子組件或模板中使用該屬性。

<h3> {{obj?.name}}</h3>

這是您的用例的StackBlitz演示

在您的情況下，您不能綁定到obj.Name ，因為Input()裝飾器綁定到對象obj而不是特定的屬性obj.Name 。 解決錯誤所需要做的就是將值傳遞為： <child-comp [obj]="MyNameIs"></child-comp> （請參閱我制作的有效StackBlitz。）