单击时更改按钮上的文本答案

【问题标题】：changing the text on a button on click单击时更改按钮上的文本
【发布时间】：2019-07-08 03:49:51
【问题描述】：

我正在使用 Angular 7，我想每次点击按钮时更改按钮上的文本，它应该是登录或注销

我把我的代码放在下面：

ts 文件：

export class HeaderComponent implements OnInit {

  text: any;

  constructor() {
    this.loadDataFromApi();
  }

  ngOnInit() {
      if (this.token == null) {
        this.text == 'login';
        alert(this.text);

      } else if (this.token) {
         this.token == 'logout';
         alert(this.text);
      }
   }

}

警报未定义即将到来

html 文件：

 <button type="button"> {{text}}</button>

【问题讨论】：

令牌在ts文件中声明
好像缺少token变量。
this.token == '注销';是错字应该是 this.token = 'logout';
你能试试解决办法吗
为什么双倍 (==) 等于分配？

标签： javascript angular typescript angular7

【解决方案1】：

您使用的是比较运算符 (==) 而不是赋值运算符 (=)。改变它，它应该工作得很好。像这样的：

export class HeaderComponent implements OnInit {

  text: any;

  constructor() {}

  ngOnInit() {
    this.loadDataFromApi();
    if (this.token) {
      this.text = 'logout';
      alert(this.text);
    } else {
      this.text = 'login';
      alert(this.text);
    }
  }
}

PS： this.loadDataFromApi本质上很可能是async，并且此调用下面的代码将在不等待它的情况下执行，从而导致意外行为。因此，在大多数情况下，您会在警报中收到login。

【讨论】：

我尝试了你的解决方案，但我仍然得到未定义的 ngOnInit() { if(this.token == null){ alert(1); this.text = '登录';警报（this.text）； } else if (this.token){ alert('2'); this.token = '注销';警报（this.text）； } }
@TestingAnurag，检查更新的答案。您的 else 条件中有 this.token 而不是 this.text。

【解决方案2】：

您应该使用赋值= 运算符而不是比较== 运算符

this.text ='login';

 export class HeaderComponent implements OnInit {

    text: any;
    constructor( );

        this.loadDataFromApi();
      }
    ngOnInit() {

        if(this.token == null){
          this.text ='login';
          alert(this.text);

        } else if (this.token){
          this.token = 'logout';
          alert(this.text);

        }
    }

【讨论】：

我尝试了你的解决方案，但我仍然得到未定义的 ngOnInit() { if(this.token == null){ alert(1); this.text = '登录';警报（this.text）； } else if (this.token){ alert('2'); this.token = '注销';警报（this.text）； } }

【解决方案3】：

try ，而不是this.token == null try !this.token（这会检查 undefiend 以及 null 和它推荐的方式）

   if(!this.token){
      this.text = 'login';
      alert(this.text);

    } else if (this.token){
      this.text== 'logout';
      alert(this.text);
    }

【讨论】：

【解决方案4】：

在else 之后，您正在修改this.token 而不是this.text。

此外，您应该使用=，而不是== 来分配this.text。像这样更改您的代码：

ngOnInit() {
    if (this.token === null) {
        this.text = 'login';
        alert(this.text);

    } else if (this.token) {
        this.text = 'logout';
        alert(this.text);
    }
}

PS：你的token 变量是在哪里定义的？我在你的 .ts 文件中看不到它。

【讨论】：

【解决方案5】：

基本上，您正在检查 auth token 是否存在，然后您将文本设置为注销并且令牌不是他们的显示登录。

在您的情况下，this.token 似乎未定义为默认值

这就是为什么在警报中显示未定义的原因。

两个条件都不行

应该是这样的

if (this.token) {//The user is logged in so log out should show.
    this.text = 'logout';
    alert(this.text);

  } else {//The user is logged out  in so login should show
     this.token == 'logout';
     alert(this.text);
  }

请先检查this.token的值，是否设置了值。

【讨论】：