每次單擊按鈕時如何添加新的 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>

我的要求是當我點擊添加圖標時它應該是 append 或每次我們點擊該項目時添加上面的兩個下拉列表。

任何人都可以幫助我嗎？

Answer 1

我們可以使用*ngIf來讀取 boolean 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