Angular 2 - 基于 JSON 响应的切换按钮 [英] Angular 2 - Toggle button based on JSON response
本文介绍了Angular 2 - 基于 JSON 响应的切换按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我们如何根据 Angular 2 中的 JSON 响应将按钮切换为是/否?
解决方案
使用以下代码切换按钮
import {Component, NgModule, VERSION} from '@angular/core'从@angular/platform-browser"导入 {BrowserModule}@成分({选择器:'我的应用',模板:`<div><button *ngIf='toggleButton' (click)='toggleButton = false'>按钮一</button><button *ngIf='!toggleButton' (click)='toggleButton = true'>按钮二</button>
`,})出口类应用{名称:字符串;切换按钮:布尔值:真;//切换按钮的标志在单击按钮时切换其值构造函数(){this.name = `角度!v${VERSION.full}`}}@NgModule({进口:[浏览器模块],声明:[应用程序],引导程序:[应用程序]})导出类 AppModule {}
How can we toggle a button to Yes/No based on JSON response in angular 2?
解决方案
Use following code to toggle button
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<div>
<button *ngIf='toggleButton' (click)='toggleButton = false'>Button One</button>
<button *ngIf='!toggleButton' (click)='toggleButton = true'>Button Two</button>
</div>
`,
})
export class App {
name:string;
toggleButton: boolean: true; // Flag to toggle your button toggling its value on click of button
constructor() {
this.name = `Angular! v${VERSION.full}`
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
这篇关于Angular 2 - 基于 JSON 响应的切换按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文