изменение текста при нажатии кнопки

Question

Я работаю с 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>

Answer 1

По сути, вы проверяете, есть ли токен аутентификации , тогда вы делаете текст как выход из системы, а токен не является их логином показа.

В вашем случае кажется, что 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, независимо от того, установлено это значение или нет.

Answer 2

После 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.

Answer 3

Вы должны использовать оператор присваивания = вместо сравнения == оператор

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);

        }
    }

Answer 4

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);
    }

Answer 5

Вы используете оператор сравнения (==) вместо оператора присваивания (=).Измените это, и это должно работать просто отлично.Примерно так:

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 в предупреждении.