Angular 2，jQuery，* ngFor不工作？

我用angular2使用jQuery，我創建了一個數據表，當我使用靜態數據都好，但只要我做一個循環* ngFor沒有什麼作品（過濾，分頁，搜索）Angular 2，jQuery，* ngFor不工作？

component.html

<table id="dtb" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" 
      style="width:100%"> 
     <thead> 
     <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Date</th> 
     <th class="disabled-sorting text-right">Actions</th> 
     </tr> 
     </thead> 
     <tfoot> 
     <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Start date</th> 
     <th class="text-right">Actions</th> 
     </tr> 
     </tfoot> 
     <tbody> 
     <tr *ngFor="let data of datas"> 
     <td>{{data.Name}}</td> 
     <td>{{data.Position}}</td> 
     <td>{{data.Office}}</td> 
     <td>{{data.Age}}</td> 
     <td>{{data.Date}}</td> 
     <td class="text-right"> 
      <a href="#" class="btn btn-simple btn-info btn-icon like"><i class="material-icons">favorite</i></a> 
      <a href="#" class="btn btn-simple btn-warning btn-icon edit"><i class="material-icons">dvr</i></a> 
      <a href="#" class="btn btn-simple btn-danger btn-icon remove"><i class="material-icons">close</i></a> 
     </td> 
     </tr> 
     </tbody> 
    </table>

compoent.ts

import {Component, OnInit, ElementRef} from '@angular/core'; 
import {TableData} from './table-data'; 
declare var $:any; 

@Component({ 
    templateUrl: 'Home.component.html' 
}) 
export class HomeComponent implements OnInit { 

    datas: Array<any> = TableData; 
    constructor(private _elRef: ElementRef) {} 

    ngOnInit() { 
    jQuery(this._elRef.nativeElement).find('#dtb').DataTable(); 
    } 
}

一些幫助？謝謝所有

來源

2017-05-17 Anas

Angular與其他人玩不好。 –

將數據傳遞給你的數據表，讓它擔心渲染記錄。就像這樣：

在你component.html：

<table id="dtb" tableClass="table table-condenced table-striped table-bordered"> 
    <thead> 
     <tr> 
      <th data-class="expand">Name</th> 
      <th>Position</th> 
      <th></th> 
     </tr> 
    </thead> 
</table>

在你component.ts：

let options = { 
    data: this.datas, 
    columns: [ 
     { data: 'Name' }, 
     { data: 'Position' }, 
     { 
      render: function (a, b) { 
       return '<a href="#" class="btn btn-simple btn-info btn-icon like my-datatable-btn" id="' + a.Id + '"><i class="material-icons">favorite</i></a>'; 
     } 
    }] 

} 

jQuery(this._elRef.nativeElement).find('#dtb').DataTable(options);

如果你要綁定一個 'angular2事件或屬性'（如（點擊）或[routerLink]）連接到數據表中的超鏈接，它將無法工作，因爲此HTML已'動態'生成。要做到這一點，你也必須做一些事情上的線路：

this._elRef.nativeElement.addEventListener('click', (event) => { 
    var className = $(event.target).attr('class'); 
    if(className.indexOf('my-datatable-btn') > -1) { //check if the target of the click event is what you want. 
     //Call your onclick handler here. 
    } 
});

除了傳遞data像你的情況下，有other useful options可以傳遞到DataTable。

來源

2017-05-17 11:02:14 mridula

謝謝你的回覆@mridula，在component.html裏面我會把標籤放進去？ – Anas

@Anas不需要''標籤。你可以刪除它。 – mridula

非常感謝@mridula，它適用於我 – Anas

這是因爲通過ng來顯示數據。你的jQuery DataTables對你的數據源一無所知。這就是爲什麼你的分頁，搜索和其他選項不起作用。你可以做的基本上是通過jQuery DataTables顯示數據，然後你將能夠使用可用的選項（數據將被加載到數據表）。

來源

2017-05-17 11:28:00 krzysztofla

Angular 2，jQuery，* ngFor不工作？

回答

相關問題