在我的應用程式中,我有兩個選擇下拉選單,在下拉選單下方我有一個按鈕。
.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>
我的要求是當我單擊添加圖示時,每次單擊該專案時,它都應該附加或添加上述兩個下拉串列。
任何人都可以幫助我。
uj5u.com熱心網友回復:
我們可以使用圖示上的單擊偵聽器*ngIf來讀取我們將其變為真/假的布林值。用于保存模板變數,但與其他不同的是,它不會在 DOM 上呈現。shouldShowAdd new Habitng-containerdiv, span
<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/app/app.component.html
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/425418.html
標籤:javascript html 有角度的 打字稿 附加
上一篇:使用javascript創建時,Div未顯示在頁面中
下一篇:JSDOM:如何訪問嵌套元素
