首页 文章

如何将数据从父组件传递到子组件？

提问于
浏览 次
1

我在子组件中有这个属性：

@Input() submitButtonDisabled: boolean;

在我的父组件的模板中，我使用插值通过属性绑定设置它：

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

子组件模板以这种方式读取其 submitButtonDisabled 属性：

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

调试我的打字稿代码我看到属性绑定工作正常，但无论 disableSubmitButton 返回什么（布尔值），提交按钮都会被禁用 . 似乎组件在绑定发生之前呈现 .

这有意义吗？我的错误在哪里？

参考：Angular 2 - Component Communication

angular typescript angular2-components angular2-databinding

2 回答

  • 5

    如果您将 string literal 传递给输入属性，请不要使用方括号：

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

    在此示例中，输入属性 isDisabled 将包含字符串 'yes' 或 'no' .

    如果你传递 anything other than a string literal ，那么你必须使用方括号：

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

    在该示例中，输入属性 isDisabled 将包含布尔值 true 或 false ，或 shouldItBeDisabled() 方法返回的值 .

    请注意这些方案中没有一个使用 {{ ... }} .

    在您的情况下，问题可能是您的方法 disableSubmitButton() 没有返回正确的值 . （另外，就像Ron537所说，你应该放弃 {{ ... }} . ）

    回复于
  • 1

    尝试从绑定中删除双括号 .

    而不是这个：

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

    用这个 ：

    [submitButtonDisabled]="disableSubmitButton()"

    或这个 ：

    submitButtonDisabled="{{disableSubmitButton()}}"
    回复于

相关问题