0

我有一个小表单，当用户单击一个元素时，我想在表单中显示更多字段。这个动作可以做多次。所以我的想法是有一个单独的 html 文件，其中包含要附加到表单的这些字段，所以我得到了这个

public showMoreFields(): void {
    const wrapper_div = document.getElementById("wrapper");
    const template = require("./my-template.html")

    container.innerHTML += template
}

新字段已正确附加。

我的第一个问题是：这是加载外部 html 的最佳方法吗？（我没有“文本/模板”脚本标签）

或者我应该创建一个新组件并将其附加到 maim 表单中？

....
<input type="text" .... />
<my-new-fields></my-new-fields>
...
<button></button>

如果是这样，我如何追加新的？

还阅读了有关ngTemplateOutlet但没有弄清楚如何适用于我的案例的信息。我对此感到很困惑

第二。虽然我的新字段正在显示点击事件，但它们并没有触发我的功能。

例子：

<span class="fa fa-remove" (click)="cleanInput()"></span>
// this is not executing the cleanInput function

谢谢

4

2 回答 2

0

您可以在要隐藏的部分上使用 *ngIf 或 [hidden] 属性。

例子： 

<input [(ngModel)] = "model1">
<your-component *ngIf="areExtraFieldsVisible">
</your-component>
<button (click)="showExtraFields()"></button>
于 2019-10-11T09:54:29.587 回答
0

1，您可以在组件中使用标志来显示/隐藏按钮点击数据：

在组件中：

showData: boolean = false;

在 html 中：

    <button (click)="this.showData=!this.showData">show/hide</button>

    <div *ngIf="this.showData">
        ...
    </div>
于 2019-10-11T09:54:56.183 回答