每次单击按钮时如何添加新的 I 项

Question

在我的应用程序中，我有两个 select 下拉菜单，在下拉菜单下方有一个按钮。

.component.html

<div class="row">
          <div class="col-sm-5">
            <select class="form-control whenI" id="power" required>
              <option value="" disabled selected>Select one</option>
              <option *ngFor="let value of values" >{{value}}</option>
            </select>
          </div>
          <div class="col-sm-5">
<select class="form-control whenI" id="power" required>
              <option value="" disabled selected>Select one</option>
              <option *ngFor="let value of values" >{{value}}</option>
            </select>
          </div>
        </div>

<span ><i class="icon icon-add"></i>Add new Habit
      </span>

我的要求是，当我点击添加图标时，每次点击该项目时，都应该追加或添加上面的两个下拉菜单。

任何人都可以帮助我。

Answer 1

我们可以使用 *ngIf 读取一个布尔值 shouldShow，我们通过 Add new Habit 图标上的点击侦听器打开 true/false。 ng-container 用于保存模板变量，但与 div, span 等不同，它不会在 DOM.

上呈现

<ng-container *ngIf="shouldShow">
  <div class="row">
    <div class="col-sm-5">
      <select class="form-control whenI" id="power" required>
        <option value="" disabled selected>Select one</option>
        <option *ngFor="let value of values">{{ value }}</option>
      </select>
    </div>
    <div class="col-sm-5">
      <select class="form-control whenI" id="power" required>
        <option value="" disabled selected>Select one</option>
        <option *ngFor="let value of values">{{ value }}</option>
      </select>
    </div>
  </div>
</ng-container>
<br /><br />
<span (click)="onAdd()"><i class="icon icon-add"></i>Add new Habit </span>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  values = [1, 2, 3, 4, 5];
  shouldShow: boolean = false;

  onAdd() {
    console.log('doing it');
    this.shouldShow = !this.shouldShow;
  }
}

这是一个工作示例：https://stackblitz.com/edit/angular-ivy-cuj5z7?file=src%2Fapp%2Fapp.component.html

每次单击按钮时如何添加新的 I 项

How add the new I item every time when we click on button

html

javascript

append

typescript

angular