平均堆栈：将产品显示到ng智能表中

Question

我试图使用ng2-smart-table插件显示产品数据。

我可以在浏览器日志中获取产品，但我需要显示相同的onChange下拉值。

\应用\部件\布局\空白页\坯料page.component.html

<xsl:variable name="colsep">
  <xsl:choose>
  <!-- If this is the last column, colsep never applies. -->
    <xsl:when test="$following.spans = ''">0</xsl:when>
    <xsl:when test="ancestor::row/@filtering and ancestor::row/@filtering!=$filter">0</xsl:when>
    <xsl:otherwise>
      <xsl:call-template name="inherited.table.attribute">
        <xsl:with-param name="entry" select="."/>
        <xsl:with-param name="colnum" select="$entry.colnum"/>
        <xsl:with-param name="attribute" select="'colsep'"/>
      </xsl:call-template>
    </xsl:otherwise>
  </xsl:choose>
</xsl:variable>

应用\部件\布局\空白页\坯料page.component.ts

<form role="form">
        <fieldset class="form-group">
            <label>Select Category</label><br/><br/>
                <select [(ngModel)]="selectedObject" (ngModelChange)="onChange(selectedObject)" name="selectedObject" class="form-control">
                        <option>--Select Category--</option>
                        <option *ngFor="let category of categories" [value]="category._id">{{category.category_name}}</option>
                </select>
        </fieldset>
    </form>


//This is where table data is displaying, need to show my data here

<ng2-smart-table [settings]="view_update_items_settings" [source]="view_update_items_smart_data" (userRowSelect)="onUserRowSelect($event)"  class="table table-hover table-striped"></ng2-smart-table>

应用\服务\ product.service.ts

onChange(categoryid) {

this.productService.getProductsOncategory(categoryid).subscribe(data => {
  if (data.success) {
    //this.selectedObject = data.mainProducts;
    console.log(data)
    console.log('Products obtained');
  } else {
    console.log('Not obtained!');
  }
});

}

在从下拉列表中选择值时，我会在浏览器中发布数据，我需要在ng2-smart-table中显示相同的内容

Answer 1

将“view_update_items_smart_data”与您从服务器获取的数据绑定。

    onChange(categoryid) {

this.productService.getProductsOncategory(categoryid).subscribe(data => {
  if (data.success) {
    //this.selectedObject = data.mainProducts;
    console.log(data)
    console.log('Products obtained');
    this.view_update_items_smart_data.load(data);  
  } else {
    console.log('Not obtained!');
  }
});

}

有关详细信息，请参阅 https://akveo.github.io/ng2-smart-table/#/examples/populate-from-server