如何在Angular 13的类组件内创建一个函数？

huangapple
go评论95阅读模式
英文:

how to create a function inside the class component in angular 13?

问题

我有一个用于切换开关的代码，但问题是我无法摆脱错误，它说'意外标记'，它期望在类内的构造函数或方法。这是Angular组件和需要实现的类，我不需要其他文件来实现，只需要这两个实现，以下是我尝试过的内容。

  1. // Angular js 13中的代码
  2. import { Component } from '@angular/core';
  4. @Component({
  5.   selector: 'toggle-button',
  6.   template: `
  7.     <div class="toggle-button">
  8.       <button (click)="toggleState()">{{ yourVariableName === true ? "ON" : "OFF" }}</button>
  9.     </div>
  10.   `
  11. })
  13. export class ToggleButton {
  14.   buttonState: boolean = false;
  16.   toggleState() {
  17.     this.buttonState = !this.buttonState;
  18.   }
  19. }

图片描述

英文:

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.

  1. `// code in Angular js 13
  2. import { Component} from &#39;@angular/core&#39;;
  4. @Component({
  5. selector: &#39;toggle-button&#39;,
  6. template: `
  7. &lt;div class=&quot;toggle-button&quot;&gt;
  8.     &lt;button (click)=&quot;toggleState()&quot;&gt;{{ yourVariableName === true ? &quot;ON&quot; : &quot;OFF&quot; }} /&gt;
  9. &lt;/div&gt;
  10. `})
  12. export class ToggleButton {
  13.     buttonState: boolean = false;
  15.     function toggleState() {
  16.         this.buttonState != this.buttonState;
  17.     }
  18. }`
  19. ```[enter image description here][1]
  22.   [1]: https://i.stack.imgur.com/0sgd8.png
  24. </details>
  27. # 答案1
  28. **得分**: 0
  30. 将您的模板从以下内容进行修改：
  32. ```html
  33. &lt;div class=&quot;toggle-button&quot;&gt;
  34.     &lt;button (click)=&quot;toggleState()&quot;&gt;{{ yourVariableName === true ? &quot;ON&quot; : &quot;OFF&quot; }} /&gt;
  35. &lt;/div&gt;

修改为：

  1. &lt;div class=&quot;toggle-button&quot;&gt;
  2.     &lt;button (click)=&quot;toggleState()&quot;&gt;{{ yourVariableName === true ? &quot;ON&quot; : &quot;OFF&quot; }}&lt;/button&gt;
  3. &lt;/div&gt;

您在按钮的起始和结束标签方面出现了问题。文本 "ON" 和 "OFF" 应该位于两个按钮标签之间：&lt;button&gt;&lt;/button&gt;。

英文:

Modify your template from this:

  1. &lt;div class=&quot;toggle-button&quot;&gt;
  2.     &lt;button (click)=&quot;toggleState()&quot;&gt;{{ yourVariableName === true ? &quot;ON&quot; : &quot;OFF&quot; }} /&gt;
  3. &lt;/div&gt;

to this:

  1. &lt;div class=&quot;toggle-button&quot;&gt;
  2.     &lt;button (click)=&quot;toggleState()&quot;&gt;{{ yourVariableName === true ? &quot;ON&quot; : &quot;OFF&quot; }}&lt;/button&gt;
  3. &lt;/div&gt;

You have messed up with the button start and end tag. Text "ON" and "OFF" should go between two button tags: &lt;button&gt;&lt;/button&gt;

huangapple
  • 本文由 发表于 2023年3月7日 11:11:00
  • 转载请务必保留本文链接：https://go.coder-hub.com/75657709.html
  • angular
  • angularjs
  • components
  • forms
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定