使用 Angular 管道写入 html

Question

我有一个管道，其中 returns 具有主题标签

的元素数组

arr=''
spl!:string;
transform(value: any, ...args: any[]) {
   this.arr=''
   this.spl = value.split(' ')
   for (const iterator of this.spl) {
       if(iterator.charAt(0)==='#'){
        this.arr=value
        console.log(iterator);
       }

   }
    return this.arr;
}

在我的 ts 文件中，我将文本添加到函数中

  this.noteService.getNoteById(this.queryParam).subscribe((res)=>{
  this.noteModel = res
  this.noteData = res.note
  this.textValue=Object(this.noteData).text
  this.textValue= this.format.transform(this.textValue) //this is the pipe
  this.textForm.controls['text'].setValue(this.textValue)// here I'm writing into textarea
})

功能returns所有标签，如何在span标签中添加标签并在textarea中写入文本？

Answer 1

要在 textarea 中显示文本，您可以像这样将 textValue 变量绑定到 textarea（更多信息 here）：

<textarea [(ngModel)]="textValue"></textarea>

单独显示标签（更多关于pipes usage and iteration in templates）：

<div class="tags">
  <span *ngFor="let tag of textValue | tags">{{ tag }}</span>
</div>

你可以这样写管道：

@Pipe({
  name: 'tags'
}) class TagsPipe {

  transform(value: any, ...args: any[]) {
    return value?
      .split(' ')
      .filter(w => w.startsWith('#');
  }
}

在你的组件中：

this.noteService.getNoteById(this.queryParam).subscribe((res) => {
  this.noteModel = res;
  this.noteData = res.note;
  this.textValue = (this.noteData as any).text;
});

使用 Angular 管道写入 html

Write into html with Angular pipe

sass

typescript

angular