1

私は単一のマップを持っています

ダーツ

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

angular2 @ngFor ディレクティブを使用して、以下のようなテーブルを作成したいと思います ここに画像の説明を入力

テーブル ヘッダー行を形成する Name 列と最初のテーブル行として配置される入力列を使用して、@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 (以下の 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>
4

1 に答える 1

0

のキーを繰り返し、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>
于 2016-02-03T23:41:15.843 に答える