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

Question

我只有一张地图

.飞镖

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

我想使用 angular2 @ngFor 指令构建一个 table 看起来像下面的

我可以使用 @ngFor 以常规方式创建 table，名称列形成 table header 行，输入列作为第一个 table 排。显示的图形是使用以下代码完成的：

.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 指令在图形中创建 table？

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>

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

Angular2 @ngFor directive and table generation with Dart

dart

angular2-forms

angular

.飞镖

.html

EDIT1 - 当运行使用第一个解决方案

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

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

Angular2 @ngFor directive and table generation with Dart

dart

angular2-forms

angular

.飞镖

.html

EDIT1 - 当 运行 使用第一个解决方案

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

EDIT1 - 当运行使用第一个解决方案