angular - 如何在按下每个输入按钮(keyup 或 enter)时在 Angular TextArea 内添加项目符号点？

Question

请只使用 Angular!

我想实现这个 http://jsfiddle.net/abhiagrawal87/m39xt/ Angular 。

带有项目符号列表的 Angular 文本区域。它从数组(字符串)中读取，然后显示所有带项目符号的数组项，用户还可以在按回车按钮时添加更多项。

我找到了类似的解决方案，例如 https://stackblitz.com/edit/angular-r5zmbg?file=src%2Fapp%2Fapp.component.html

<form [formGroup]="myForm">
<div formArrayName="things">
    <div *ngFor="let thing of things.controls; let i=index">
        <label [for]="'input' + i">Thing {{i}}:</label>
<input type="text" [formControlName]="i" [name]="'input' + i" [id]="'input' + i" (keyup.enter)="onEnter()"  />
    </div>
</div>

但在此项目符号不在文本区域内。

这可能吗？

我试过: https://stackblitz.com/edit/angular-r5zmbg?file=src%2Fapp%2Fapp.component.html

我要实现这个 http://jsfiddle.net/abhiagrawal87/m39xt/ Angular 。

Answer 1

你可以在 html 模板中监听 focus 和 keyup/down 事件:

<textarea [(ngModel)]="content" placeholder="comment"
  (focus)="mytextOnFocus()"  (keyup)="addBulletText($event)"></textarea>

在你的组件中:

content = ""; // model used for textarea
addBulletText(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
      this.content += '• '
    }

    if (this.content.substr(this.content.length - 1) == '\n') {
      this.content = this.content.substring(0, this.content.length - 1);
    }
  }

  mytextOnFocus() {
    this.content += '• ';

  }

这完全基于您分享的有问题的 fiddle 。您可以查看 Stackblitz here :