Question

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

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

这是我的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。
< / LI>
此外，我不想显示公开的网址我只想要它的值并通过ngModel将其发送到组件，那么如何实现所有这些？

Answer 1

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

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

Answer 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将信息从模板传递到组件

2 个答案: