Question

目前，我正在使用angular 2.0。在我的一个HTML文件中，我有像

这样的代码

<div class="row">
      <button class="btn btn-primary" (click)="addExtra">Add Extra      </button>
  </div>

如何在点击此添加额外频道按钮时添加div。我需要有一个div，如下所述。我是否需要使用打字稿代码添加此HTML？

<div class="row">
            <div class="col-md-2">
                <label for="title">Title</label>
            </div>
            <div class="col-md-8">
                <input type="text" id="title" style="width:100%" class="form-control" />
            </div>
        </div>

Answer 1

You would wire the click to a function that adds to a list in the controller. You would then use an ngFor (docs https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html)` to loop through this list and add that template.

Answer 2

如果两个Html都在同一页面中。在typescript文件中声明变量addExtra并默认将其设置为false。点击按钮使其成为真。

<div class="row">
  <button class="btn btn-primary" (click)="addExtra=true">Add Extra</button>
</div>

<div class="row" *ngIf="addExtra">
  <div class="col-md-2">
     <label for="title">Title</label>
  </div>
  <div class="col-md-8">
     <input type="text" id="title" style="width:100%" class="form-control" />
  </div>
</div>

如何在打字稿中点击按钮添加div？

2 个答案: