Question

我有一个数组集合，其中有类似

的数据

[0]: username {kavya} secret {password}
[1]: lorem ipsem text data value
[2]: lorem {{lrm}} datas {{pp}}

I am using foreach to show this data in frontend with 

      <div *ngFor="let data of output;let i=index">
          <div *ngIf="data.includes('{') || data.includes('{{');else isNotEdited;" >
            <div class="variable-textarea" contenteditable="false" >
            <span>
              {{data | slice:' ' }}  
            </span>
            </div>
          </div>
          <ng-template #isNotEdited>
              <ngx-md>{{data}}</ngx-md>
          </ng-template>

          </div>

在这里，我实现了div的0,2行是可编辑的，并且如果第一个数组是不可编辑的。但我想像特定匹配项那样，以“ {”或“ {{”开头的单词，并且该特定单词需要突出显示和可编辑。

是否可以通过这种方式进行选择预先感谢。

Answer 1

您可以将数据拆分为单词：

<div *ngFor="let data of arr">
    <span *ngFor="let word of data.split(' ')">
        <span *ngIf="word.indexOf('{') > -1;else isNotEdited;">
            <span class="variable-textarea-2" contenteditable="true">
        {{word | slice:' ' }}  
            </span>
        </span>
        <ng-template #isNotEdited>
            <span class="variable-text-2" contenteditable="false">
                {{word}}
            </span>
        </ng-template>
    </span>
</div>

检查我根据您的代码制作的以下Stackblitz示例：https://stackblitz.com/edit/angular-pkg6i9

Answer 2

这是一场性能梦night，您不想在模板中运行这么多功能，而您的格式也无济于事。提前将数据映射到更友好的视图模型中：

this.mappedOutput = this.output.map(data => {
  const editable = data.includes('{'); // checking for doubles is redundant
  return {
    editable,
    data: !editable 
            ? data 
            : data.split(' ')
                  .map(word => ({
                    word, 
                    editable: word.trim().startsWith('{') && word.trim().endsWith('}')
                  })) 
  };
})

每当您的输出更改时运行此命令，然后在模板中使用它：

  <div *ngFor="let data of mappedOutput;let i=index">
      <div *ngIf="data.editable;else isNotEdited;" >
        <div class="variable-text">
          <ng-container *ngFor="let word of data.data">
            <div *ngIf="word.editable; else wordTmp" class="variable-textarea inline" contenteditable="true" >
              <span>{{word.word}}</span>
            </div>
            <ng-template #wordTmp>
              {{word.word}}
            </ng-template>
          </ng-container>
        </div> 
      </div>
      <ng-template #isNotEdited>
          <ngx-md>{{data.data}}</ngx-md>
      </ng-template>
  </div>

，然后通过将其添加到CSS中来调整样式：

.variable-textarea.inline {
  display: inline-block;
  width: fit-content;
  margin: 0;
}

这是经过编辑的闪电战：https://stackblitz.com/edit/angular-arayve?file=src/app/app.component.html

使用角度7通过开始和结束匹配突出显示单词

2 个答案: