Заменить HTML на Angular 7 по ссылке

Question

Я передаю UL по ссылке в функции Angular, и я хочу добавить в этот UL немного 'li'.

  <ng-container *ngIf="FileUploaded">
              <tr class="" *ngFor="let row of this.fileJson">
                <td class="text-left">{{row.Comment}}</td>
                <td class="text-center">

                  <div class="tags">
                    <ul class="tags tags--ds ui-sortable" #forAddingTag> // This is the reference which is passed in below button's function named "AddTag()"
                      <ng-container *ngFor="let key of this.Object.keys(row)">
                        <li #ToRemoveTag class="tags__item" *ngIf="key.substring(0,5)=='Topic'">
                          <p>{{row[key]}}</p> <span class="close__item"><i class="fal fa-times"
                              (click)="removeTag(ToRemoveTag)"></i></span>
                        </li>
                      </ng-container>

                    </ul>
                  </div>

                </td>
                <td class="text-center">
                  <a class="btn" (mousedown)="AddTag(forAddingTag)">Update</a> // Here the reference is being passed
                </td>

              </tr>

            </ng-container>

Вот машинописный код

AddTag(evalue){
    debugger

      var text = "";
      if (window.getSelection) {
          text = window.getSelection().toString();
      } 
      var value = text;

  }

Я просто хочу добавить еще несколько букв в конце этого UL. Я могу сделать это с помощью JQuery, но его нельзя использовать в Angular.

Answer 1

Я бы рекомендовал не запускать какие-либо функции в теге *ngFor. Он будет вызываться слишком много раз, чем вы думаете. Лучше было бы создать другой объект в контроллере (что-то вроде filteredRows) и l oop поверх него в шаблоне с каналом keyvalue.

Template

<ng-container *ngIf="FileUploaded">
  <tr class="" *ngFor="let row of filteredRows; let rowIndex=index">
    <td class="text-left">{{ row.comment }}</td>
    <td class="text-center">
      <div class="tags">
        <ul class="tags tags--ds ui-sortable" #forAddingTag>
          <ng-container *ngFor="let topic of filteredRows.topics | keyvalue; let topicIndex=index">
            <li #ToRemoveTag class="tags__item">
              <p>{{ topic.value }}</p> <span class="close__item"><i class="fal fa-times"(click)="removeTag(rowIndex, topicIndex)"></i></span>
            </li>
          </ng-container>
        </ul>
      </div>
    </td>

    <td class="text-center">
      <a class="btn" (mousedown)="addTag(rowIndex)">Update</a>
    </td>
  </tr>
</ng-container>

Затем вы можете изменить переменную filteredRows (добавить / удалить свойства), чтобы отразить изменения в шаблоне.

Контроллер

filteredRows: {comment: any, topics: any[]}[];

ngOnInit() {
  fileJson.forEach(row => {
    const comment = row['Comment'];
    const topics = JSON.parse(JSON.stringify(row));    // <-- create a deep copy of `row` object
    for (const key in topics) {
      if (topics.hasOwnProperty(key)) {
        if (key.substring(0, 5) !== 'Topic') {
          delete topics[key];
        }
      }
    }
    this.filteredRows.push({comment: comment, topics: topics});
  });
}

addTag(index) {
  this.filteredRows[index].topics.push(
    {
      // object content
    }
  );
}

removeTag(rowIndex, topicIndex) {
  delete this.filteredRows[rowIndex].topics[topicIndex];
}

---

^{Имя функции AddTag() идет вразрез с обычным соглашением о присвоении имен функциям.}