使用 Angular 管道写入 html

【问题标题】：Write into html with Angular pipe使用 Angular 管道写入 html
【发布时间】：2022-01-25 20:34:45
【问题描述】：

我有一个管道，它返回一个包含标签的元素数组

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

函数返回所有标签，如何在span标签中添加标签并在textarea中写入文本？

【问题讨论】：

看起来你的管道只返回最后一个标签而不是标签数组。

标签： angular typescript sass

【解决方案1】：

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

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

单独显示标签（更多关于pipes usage和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;
});

【讨论】：