title: How to use ngfor in grid-list by material
body: <p>I want to implement a dynamic grid list with Angluar material. but I have some problems.</p>
  
  <p>My JSON data looks like this: </p>
  
  <pre><code>[
      {
          "abc": "sdfgsdfgs",
          "test": "dfgdfgdfgdfg"
      },
      {
         "abc": "dfgsdfgsdfg",
          "test": "dfgfgfgfgr"
      },
      {
          "abc": "sdfgsdfgs",
          "test": "asdfstest"
      },
  ] 
  
  
  </code></pre>
  
  <p>And in the HTML I want to use <code>ngFor</code> to loop this JSON data and to show in a gird list.</p>
  
  <pre><code>&lt;mat-grid-list cols="2" rowHeight="7:1"&gt;
        &lt;mat-grid-tile&gt;
          &lt;u&gt;abc&lt;/u&gt;
        &lt;/mat-grid-tile&gt;
        &lt;mat-grid-tile&gt;
          &lt;u&gt;test&lt;/u&gt;
        &lt;/mat-grid-tile&gt;
        &lt;ng-container *ngFor="let item of datas"&gt;
        &lt;mat-grid-tile&gt;
          {{ item.abc}}
          {{ item.test}}
        &lt;/mat-grid-tile&gt;
        &lt;/ng-container&gt;
      &lt;/mat-grid-list&gt;
  
  </code></pre>
  
  <p>the expected result should look like this: </p>
  
  <pre><code>abc               test
  -------------------------------
  sdfgsdfgs        dfgdfgdfgdfg
  dfgsdfgsdfg      dfgfgfgfgr
  
  
  ````
  
  How can I loop this? 
  </code></pre>