英文:
how to create a function inside the class component in angular 13?
问题
我有一个用于切换开关的代码，但问题是我无法摆脱错误，它说'意外标记'，它期望在类内的构造函数或方法。这是Angular组件和需要实现的类，我不需要其他文件来实现，只需要这两个实现，以下是我尝试过的内容。
// Angular js 13中的代码
import { Component } from '@angular/core';
@Component({
selector: 'toggle-button',
template: `
<div class="toggle-button">
<button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }}</button>
</div>
`
})
export class ToggleButton {
buttonState: boolean = false;
toggleState() {
this.buttonState = !this.buttonState;
}
}
英文:
I have code for switch toogle but the problem i cant get rid of the erro says 'unexpected token' its expecting constructor or method within a class. This is Angular component and class that needs to be implements i dont need other files to use to achieve only these two implementation and below this is what i tried.
`// code in Angular js 13
import { Component} from '@angular/core';
@Component({
selector: 'toggle-button',
template: `
<div class="toggle-button">
<button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }} />
</div>
`})
export class ToggleButton {
buttonState: boolean = false;
function toggleState() {
this.buttonState != this.buttonState;
}
}`
```[enter image description here][1]
[1]: https://i.stack.imgur.com/0sgd8.png
</details>
# 答案1
**得分**: 0
将您的模板从以下内容进行修改：
```html
<div class="toggle-button">
<button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }} />
</div>
修改为：
<div class="toggle-button">
<button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }}</button>
</div>
您在按钮的起始和结束标签方面出现了问题。文本 "ON" 和 "OFF" 应该位于两个按钮标签之间：<button></button>。
英文:
Modify your template from this:
<div class="toggle-button">
<button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }} />
</div>
to this:
<div class="toggle-button">
<button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }}</button>
</div>
You have messed up with the button start and end tag. Text "ON" and "OFF" should go between two button tags: <button></button>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论