Как напечатать то, что я пишу в поле ввода, когда я нажимаю кнопку в Angular?

Question

Итак, я хочу написать что-нибудь в поле ввода текста, затем нажать кнопку и показать это здесь <p>Hello {{inputValue}}</p>. Я не хочу использовать keyup для этого. Я также сохраняю его в localalstorage, который работает прямо сейчас, но не, если я удалю keyup.

Мой файл .ts:

  selector: 'app-dialouge',
  templateUrl: './dialouge.component.html',
  styleUrls: ['./dialouge.component.css']
})

export class DialougeComponent implements OnInit {
  inputValue: string;
  onKeyUp(event){
    this.inputValue = event.target.value;
  }

  saveBtn(): void {
    console.log("btn clicked: " + this.inputValue);
    window.localStorage.setItem("inputValue", this.inputValue);
    window.localStorage.getItem("inputValue");
  };
  clearStorage(){
    localStorage.clear();
    console.log("ls cleared");
  }


  constructor() { }

  ngOnInit(): void {

  }

}

Файл моего шаблона:

<input type="text" (keyup)="onKeyUp($event)" />
<button (click)="saveBtn()">save</button>
<button (click)="clearStorage()">clear</button>

<p>Hello {{inputValue}}</p>

Answer 1

Вы должны использовать [(ngModel)], чтобы изменить его на input, потому что более правильно использовать [(ngModel)]. keyup срабатывает, когда вы отпускаете палец с клавиатуры.

<input type="text" [(ngModel)]="inputValue" />
<button (click)="saveBtn()">save</button>
<button (click)="clearStorage()">clear</button>

<p>Hello {{afterButtonPressedValue}}</p>

Создайте другое значение для отображения и введите: inputValue для ввода текста и afterButtonPressedValue для отображения в шаблоне.

И ваш тс будет:

  selector: 'app-dialouge',
  templateUrl: './dialouge.component.html',
  styleUrls: ['./dialouge.component.css']
})

export class DialougeComponent implements OnInit {
  inputValue: string;
  afterButtonPressedValue = '';

  saveBtn(): void {
    console.log("btn clicked: " + this.inputValue);
    window.localStorage.setItem("inputValue", this.inputValue);
    window.localStorage.getItem("inputValue");
    this.afterButtonPressedValue = this.inputValue;
  };
  clearStorage(){
    localStorage.clear();
    console.log("ls cleared");
    this.afterButtonPressedValue = '';
  }


  constructor() { }

  ngOnInit(): void {

  }

}

Answer 2

Вы можете использовать ngModel вместо keyup в input.

изменить свой HTML, как показано ниже,

<input type="text" [(ngModel)]="inputValue" />
<button (click)="saveBtn()">save</button>
<button (click)="clearStorage()">clear</button>

<p>Hello {{inputValue}}</p>

Удалить метод onKeyUp из вашей TS файл.