时间戳

首页 > 解决方案 > 基于列名的下拉列表中的表数据

angular5 - 基于列名的下拉列表中的表数据

问题描述

我有一个这样的模拟数据：

export const CHARACTERS: any[] =
[
  {
    name: 'Earl of Lemongrab',
    age: 'Unknown',
    species: 'Lemon Candy',
    occupation: 'Earl, Heir to the Candy Kingdom Throne'
  },
  {
    name: 'Bonnibel Bubblegum',
    age: '19',
    species: 'Gum Person',
    occupation: 'Returned Ruler of the Candy Kingdom'
  },
  {
    name: 'Phoebe',
    age: '16',
    species: 'Flame Person',
    occupation: 'Ruler of the Fire Kingdom'
  }

我已经获取了这些数据并将其显示在表格上。现在我想根据列名在下拉列表中显示所有这些数据。

我正在使用下面的代码，但它没有正确显示；

  <div class = "two">
   <select [(ngModel)]="searchText" name="char[column]" placeholder="select">
     <option 
       *ngFor="let char of characters"
          *ngFor="let column of columns"
       [ngValue]="char[column]">{{char[column]}}</option>  
   </select>
  </div>

我也尝试过下面的代码，但它给了我一个错误，说名称不是列的已知属性。虽然我的专栏有四个字符串，例如 ["name" , "age" , "species" , "gender"]

  <div class = "two">
   <select [(ngModel)]="searchText" name="column" placeholder="select">
    <option 
     *ngFor="let column of columns"
     value="column.name">{{column.name}}</option>  
   </select>
  </div>

标签： angular5

解决方案

  <div class = "two">
   <select [(ngModel)]="searchText" name="char[column]" placeholder="select">
     <option 
          *ngFor="column of columns"
       Value="char[column.name]">{{char[column.name]}}</option>  
   </select>
  </div>

推荐阅读