Question

当我点击页面上的某个按钮时，会触发一个事件，并在存在相对内容时动态更新DOM。

但我希望能够在再次单击按钮时清除DOM，然后提供结果。再次点击当前只会添加越来越多的内容，这是不好的。

我一直试图在Angular中这样做，并且一直遇到麻烦。

我的模板

<div class="container">
  <div class="row">
  <div class="articles-container" #element>
    <div class="article" *ngFor="let article of allMatches">


      <div class="article-image"> <img src="{{article.image}}" alt=""> </div>

<div class="title-wrapper">
  <div class="article-info">
    <a href="{{article.url}}"> <h3> {{ article.title }} </h3> </a>
    <div class="article-description">  {{ article.description }} </div>
  </div>

  <div class="source-wrapper">
    <div class="article-thumb"> <img src="{{article.thumbnail}}" alt=""> </div>
    <div class="article-source"> {{ article.source }} </div>
  </div>
</div>


      </div>
    </div>
  </div>

我一直在尝试抓取#element标记，并使用jQuery查看它是否为空。但它只是打破了应用程序。

即

 // if ($("#element").is(':empty)') ) {
    //  
    //     console.log("empty");
    //   }

我正在尝试在我的函数的最顶部（单击按钮时触发的那个）执行此操作，因此它检查div是否包含内容，如果是，则清空它，然后提供新内容。

我在Angular2中不鼓励使用jQuery。有什么更好的方法？

Answer 1

你没有以棱角分明的方式思考。您应该单独保留模板并在控制器中处理。

这意味着你应该在控制器中清空allMatches数组：

allMatches.length = 0;

Answer 2

我会说你应该修改allMatches数组，因为你知道数组的内容就是填充articles-container div的所有内容。如果更改数组，则更改DOM。

let newMatches = [{title: 'This is a match'}]; // example data

allMatches = []; // clears the data

setTimeout(() => {
  allMatches = newMatches;
}, 1500); // loads data in 1.5 seconds

如果在数组为空时显示某些样板HTML，则可以向*ngIf div添加articles-container，以便仅在填充数组时将其添加到DOM。

<div class="articles-container" *ngIf="allMatches.length > 0">
    <!-- content (*ngFor articles) -->
</div>

如何在Angular 2模板中查看元素是否包含内容（或为空）？

我的模板

2 个答案: