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

Question

我有一张地图

.dart

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

我想使用angular2 @ngFor指令构建一个类似下面的表

我可以使用@ngFor以常规方式创建表，其中Name列形成表头行，输入列作为第一个表行。显示的图形使用以下代码完成：

的.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>