Как я могу создать кнопку для Typescript Code, которая имеет функцию onclick?

Question

Я программирую с Angular.

Мой вопрос: как я могу создать кнопку или другой элемент в коде Typescript, который имеет функцию (щелчка)?

Я сделал это таким образом, но он не работал, он только создал кнопку / элемент, но не событие onclick (Если я нажал его, ничего не произошло).

createDivs() {
    const textausgabe = document.querySelector('#textausgabe');
    textausgabe.innerHTML = '<div [ngClass]="[bntStyle]" (click)="functionCaller()">Submit</div>';

  }

  functionCaller() {
    alert('Hey');
  }

Так есть ли способ решить мою проблему?

Answer 1

Вы не можете сделать это так.

Используйте этот код в файле HTML.

Если у вас есть конкретный случай c, чтобы показать или скрыть это. Вы должны использовать * ngIf для условия.

Чтобы манипулировать этим условием, вы используете ngModel и используете эту переменную в * ngIf.

Надеюсь, это поможет.

Answer 2

Ответ - нет. Это не angular способ делать вещи. Если вам нужно добавить кнопку, просто используйте директиву *ngIf.

@Component({template: '<div *ngIf="showSubmit" [ngClass]="[bntStyle]" (click)="functionCaller()">Submit</div>'})
class Somecomponent {

  showSubmit = false;

  createDivs() {
    this.showSubmit = true;
  }

  functionCaller() {
    alert('Hey');
  }

Если вам нужно добавить случайное количество кнопок на основе пользовательского ввода, вы можете использовать *ngFor для итерации по пользователю вход.