Question

我正在使用angular 4来构建应用程序。我想使用同位素插件对元素进行排列和排序。如果html中的数据是静态的，则可以正常工作。但是将服务器中的数据绑定到元素时不起作用，这将导致错误：$（...）。isotope不是函数

home.component.html

            <div class="isotope-items-wrap" #target>
          <div class="isotope-item height-2" data-filter="priceLowToHigh" *ngFor="let pItem of products;let idx=index;let last1 = last;">
            <img src="{{baseUrl}}{{pItem.image.path}}{{pItem.image.filename}}" *ngIf="pItem.image;else noImage" alt="Rug" />
            <ng-template #noImage>
              <div style="width: 280px;height: 482px;">no image
              </div>
            </ng-template>
            <h5>{{pItem.name}}</h5>
            <p>{{idx}}</p>
            <h5>{{pItem.price}}</h5>
          </div>
        </div>

home.component.ts

ngForCallback() {
    if (!this.ngForEnd) {
      await this.delay(1000);
      this.ngForEnd = true;
      var itemSelector = '.isotope-item';
      $('.isotope-items-wrap').isotope({
        itemSelector: itemSelector,
        transitionDuration: '0.5s',
        masonry: {
          columnWidth: itemSelector,
        },
      });
    } else {
      console.log('for was ended');
    }
  }

我将index.html和angular-cli.json中的同位素插件js文件导入

index.html

<script type="application/javascript" src="./assets/vendor/jquery/jquery.min.js"></script>

<script type="application/javascript" src="./assets/js/jquery.isotope.js"></script>

angular-cli.json

  "scripts": [
    "src/assets/vendor/jquery/jquery.min.js",
    "src/assets/vendor/jquery-easing/jquery.easing.min.js",
    .
    .
  ],

$（...）。isotope不是在angular 4中使用同位素JQuery插件的函数

0 个答案: