如何在ng2 smart table中使用NgFor实现下拉框产品名遍历

我来帮你搞定这个问题，其实要实现用NgFor遍历产品名称作为下拉选项，你可以通过自定义编辑器组件或者直接用ng2-smart-table自带的list编辑器来实现，两种方案都给你整理好了：

方案一：用自带的list编辑器（简单快捷） #

如果你的需求只是基础的下拉选择，不需要复杂的自定义逻辑，直接用框架自带的list类型编辑器最省事。只需要把你从接口拿到的产品列表转成{value: string, title: string}格式的数组，配置到列里就行：

// 你的Component.ts代码调整
this.service.get_type().subscribe(pro => {
  const productOptions = pro.map(product => ({
    value: product.product_name, // 选中后提交的值
    title: product.product_name  // 下拉框显示的文本
  }));
  
  this.settings = {
    mode: 'inline',
    hideSubHeader: false,
    add: {
      addButtonContent: '<i class="nb-plus"></i>',
      createButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    columns: {
      // 其他列配置...
      pname: {
        title: 'Product Name',
        editor: {
          type: 'list',
          config: {
            list: productOptions // 传入转好的选项数组
          }
        }
      }
    }
  };
});

方案二：自定义编辑器组件（灵活扩展） #

如果需要更复杂的逻辑（比如动态加载选项、自定义样式），那就得写个自定义组件来实现NgFor遍历：

第一步：创建自定义下拉组件 #

// product-select.component.ts
import { Component, Input } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';

@Component({
  template: `
    <select [(ngModel)]="cell.newValue" class="form-control">
      <!-- 用NgFor遍历产品列表生成选项 -->
      <option 
        *ngFor="let product of products" 
        [value]="product.product_name"
      >
        {{ product.product_name }}
      </option>
    </select>
  `,
})
export class ProductSelectComponent implements ViewCell {
  @Input() cell: any; // ng2-smart-table传入的单元格数据
  @Input() products: any[]; // 接收父组件传来的产品列表
}

然后在你的模块里声明这个组件（Angular 9+ 可以不用加entryComponents，旧版本需要）：

// your.module.ts
import { ProductSelectComponent } from './product-select.component';

@NgModule({
  declarations: [
    // 其他组件...
    ProductSelectComponent
  ],
  entryComponents: [ProductSelectComponent] // 旧版本Angular需要这一行
})
export class YourModule { }

第二步：在settings中配置自定义组件 #

回到你的Component.ts，把pname列的编辑器指定为这个自定义组件，并传入产品列表：

// 你的Component.ts
import { ProductSelectComponent } from './product-select.component';

// ...其他代码
this.service.get_type().subscribe(pro => {
  this.productList = pro; // 把接口返回的产品列表存到组件变量里
  
  this.settings = {
    // 其他配置和之前一样...
    columns: {
      // 其他列配置...
      pname: {
        title: 'Product Name',
        editor: {
          type: 'custom',
          component: ProductSelectComponent,
          config: {
            products: this.productList // 把产品列表传给自定义组件
          }
        },
        // 可选：如果显示模式下也要用这个下拉组件（否则显示纯文本）
        renderComponent: ProductSelectComponent,
        renderConfig: {
          products: this.productList
        }
      }
    }
  };
});

注意事项 #

• 一定要把settings的赋值放在subscribe回调里，确保产品列表已经拿到再初始化配置，避免异步导致的空值问题。
• 如果用方案一，记得把产品列表转成list编辑器要求的{value, title}格式，否则下拉框会显示异常。

内容的提问来源于stack exchange，提问作者hari prasanth