Angular2 #ngFor directive and table generation with Dart - dart

Question

I have a single map
.dart
Map<String, String> name = {"title":"Countess","first":"Tommy","last":"Clarke","middle":"Kowan","suffix":"Junior"}
I would like to use angular2 #ngFor directive to construct a table looking like the one below
I can create the table in the conventional way using #ngFor with the Name column forming the table header row and the input column placed as the first table row. The graphic shown was done with the following code:
.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>
How can I crate the table in the graphic using #ngFor directive?
EDIT1 - CONSOLE ERROR WHEN RUN WITH FIRST SOLUTION
>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's port of SnareChops answer below) | CORRECT ANSWER
Added a custom pipe to perform the capitalization
///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

Iterate the keys of the Map, use those for the titles, and then you can use the key to access the value in the Map which gives you the value.
<tbody>
<tr *ngFor="#name of names?.keys">
<td class="mdl-data-table__cell--non-numeric">{{name}}</td>
<td>{{names[name]}}</td>
</tr>
</tbody>