通过 ngModel 将信息从模板传递到组件答案

【问题标题】：Pass info from template to component via ngModel通过 ngModel 将信息从模板传递到组件
【发布时间】：2018-09-25 06:35:18
【问题描述】：

我正在尝试在单击按钮时将一些字符串数据或更具体的 URL 从 HTML 模板传递给组件。这就是我正在做的。

我只在app-module 中导入了FormsModule。
然后在我需要显示所有这些的组件中，即 home 组件中，我没有导入任何东西。

这是我的 HTML 代码：

<div class="card-body">
    <h5 class="card-title">{{house.name | uppercase}}</h5>
    <p class="card-text card-text2">{{house.words | uppercase}}</p>

    <p  name="houseUrl" [(ngModel)]="houseUrl" #UrlForHouse="ngModel" >{{house.url | uppercase}}</p>
    <a  class="btn btn-primary" (click)="printHouseUrlInConsole(UrlForHouse.value)">Print URL In Console</a>
</div>

然后是组件中的方法：
```
public houseUrl:string;
public printHouseUrlInConsole(url:string):any {
console.log(url);
}
```
现在不幸的是，它在控制台日志中返回了一个空值还有一个错误：No value accessor for form control with name: 'houseUrl'。

我不知道如何通过，我只是看到我们需要使用ngModel，这就是我这样做的原因，我不知道如何实现ngModel。
另外我不想将 URL 公开我只想要它的值并通过ngModel 将其发送到组件，那么如何实现这一切呢？

【问题讨论】：

标签： angular templates binding components

【解决方案1】：

[ngModel] 与表单 API 一起使用。它旨在用于<input> 或<select> 等表单元素。 <p> 上不需要它。

<div class="card-body">
    <h5 class="card-title">{{house.name | uppercase}}</h5>
    <p class="card-text card-text2">{{house.words | uppercase}}</p>

    <p  name="houseUrl">{{house.url | uppercase}}</p>
    <a  class="btn btn-primary" (click)="printHouseUrlInConsole(house.url)">
       Print URL In Console
    </a>
</div>

【讨论】：

感谢您的帮助，我的错。但在某些情况下，我需要在按钮点击时发送一些价值，有什么办法可以做到这一点，例如我需要增加按钮点击次数要做到这一点？这就是我对 ngModel 感兴趣的原因
@Tomasz Kula：你的答案中的input 在哪里？
@HDJEMAI 我想你是在问我，没有输入。

【解决方案2】：

您不能将ngModel 与p 标记一起使用。这就是你得到的原因：

No value accessor for form control with name: 'houseUrl'

试试：

<div class="card-body">
    <h5 class="card-title">{{house?.name | uppercase}}</h5>
    <p class="card-text card-text2">{{house?.words | uppercase}}</p>

    <input  name="houseUrl" [(ngModel)]="houseUrl" (change)="printHouseUrlInConsole($event.target.value)" />{{house?.url | uppercase}}
    <a  class="btn btn-primary" (click)="printHouseUrlInConsole(houseUrl)">Print URL In Console</a>
</div>

现场演示：进入控制台并点击Print URL In Console

https://stackblitz.com/edit/angular-stackblitz-demo-kmsitm?file=app%2Fapp.component.html

【讨论】：

感谢您的努力，我现在要进行插值，但我知道我将来会需要 ngModel 。那么，您能否将我引导到有效处理所有这些主题的教育资源，因为知道比浪费时间破解解决方案更好。