时间戳

首页 > 解决方案 > 通过引用更改 Angular 7 中的 HTML

javascript - 通过引用更改 Angular 7 中的 HTML

问题描述

我在 Angular 函数中通过引用传递 UL，我想在该 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 的末尾添加更多的“li”。我可以在 JQuery 的帮助下做到这一点，但它不应该在 Angular 中使用。

标签： javascriptangulartypescript

解决方案

我建议不要在*ngFor标签中运行任何功能。它会被调用的次数比你想象的要多。更好的方法是在控制器中创建另一个对象（类似于filteredRows）并在模板中用keyvalue管道循环它。

模板

<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()违背了函数的驼峰式命名的通常约定。

推荐阅读