Angular2 @ngFor 指令和使用 Dart 生成表

Question

我只有一张地图

.dart

Map<String, String> name = {"title":"Countess","first":"Tommy","last":"Clarke","middle":"Kowan","suffix":"Junior"}

我想使用 angular2 @ngFor 指令来构造一个如下所示的表格

我可以使用@ngFor 以常规方式创建表格，其中名称列形成表格标题行，输入列放置为第一个表格行。显示的图形是使用以下代码完成的：

.html

<table class = "mdl-data-table mdl-js-data-tablemdl-shadow--4dp">
  <thead>
    <tr>
      <th class = "mdl-data-table__cell--non-numeric">Name</th>
      <th>Input</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class = "mdl-data-table__cell--non-numeric">Title</td>
      <td>{{name.title}}</td>
    </tr>
    <tr>
      <td class = "mdl-data-table__cell--non-numeric">First</td>
      <td>{{name.first}}</td>
    </tr>
    <tr>
      <td class = "mdl-data-table__cell--non-numeric">Middle</td>
      <td>{{name.middle}}</td>
    </tr>
    <tr>
      <td class = "mdl-data-table__cell--non-numeric">Last</td>
      <td>{{name.last}}</td>
    </tr>
    <tr>
      <td class = "mdl-data-table__cell--non-numeric">Suffix</td>
      <td>{{name.suffix}}</td>
    </tr>
  </tbody>
</table>

如何使用@ngFor 指令在图形中创建表格？

EDIT1 - 使用第一个解决方案运行时出现控制台错误

>EXCEPTION: Class '_CompactIterable' has no instance method '[]'.

NoSuchMethodError: method not found: '[]'
Receiver: Instance of '_CompactIterable'
Arguments: [null] in [{{names.keys[idx].slice(1,1).toUpperCase()}}{{names.keys[idx].slice(2)}} in NameComponent@148:52]
  EXCEPTION: Class '_CompactIterable' has no instance method '[]'.

NoSuchMethodError: method not found: '[]'
Receiver: Instance of '_CompactIterable'
Arguments: [null] in [{{names.keys[idx].slice(1,1).toUpperCase()}}{{names.keys[idx].slice(2)}} in NameComponent@148:52]
    (anonymous function)    
  ORIGINAL EXCEPTION: Class '_CompactIterable' has no instance method '[]'.

.dart（Dart 的 SnareChops 端口答案如下）|正确答案

添加了一个自定义管道来执行大写

///Takes the first letter of [String] key in a [Map], capitalizes it and 
///returns the key value as the capitallized word
@Pipe( name: 'capitalize' )
class CapitalizePipe extends PipeTransform {
  dynamic transform( String value, List args ) {
    StringBuffer buffer = new StringBuffer( );

    List<String> list = value.split( '' );
    if ( value != null ) {
      for ( int i = 0; i < list.length; i++ ) {
        if ( i == 0 ) {
          buffer.write( list[i].toUpperCase( ) );
          continue;
        }

        buffer.write( list[i] );
      }
    }
    return buffer.toString( );
  }
}

  <tbody>
  <tr *ngFor = "#name of names?.keys">
    <td class = "mdl-data-table__cell--non-numeric">{{name | capitalize}}</td>
    <td>
      {{names[name]}}
    </td>
  </tr>
  </tbody>

Answer 1

迭代Map 的键，将它们用于标题，然后您可以使用该键访问Map 中的值，从而为您提供值。

<tbody>
  <tr *ngFor="#name of names?.keys">
    <td class="mdl-data-table__cell--non-numeric">{{name}}</td>
    <td>{{names[name]}}</td>
  </tr>
</tbody>