使用mat-grid-list报错DOMException：逗号非合法属性名求助

问题根源很明确：你在<mat-grid-list>标签的属性间加了个多余的逗号，HTML语法里元素属性只用空格分隔，不能加逗号，这个非法字符导致浏览器解析属性时出错。

修复步骤： #

• 把<mat-grid-list cols="3", rowHeight="4:3" >里的逗号删掉，改成：<mat-grid-list cols="3" rowHeight="4:3" >
• 额外提醒：你在mat-card-content里写了{{itemCards}}，这会直接输出整个数组对象，应该删掉或者改成具体属性（比如{{itemCard.brand}}），不然页面上会显示一堆杂乱的对象字符串。

修复后的完整代码： #

<mat-grid-list cols="3" rowHeight="4:3" >
  <mat-grid-tile *ngFor="let itemCard of itemCards">

<!--<ul>-->
<!--  <li *ngFor="let itemCard of itemCards">-->
<mat-card class="card">
  <mat-card-header>
    <div mat-card-avatar class=""></div>
    <mat-card-title>
      {{itemCard.brand}}
    </mat-card-title>
    <img mat-card-avatar src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-subtitle>
      {{itemCard.model}}
    </mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      {{itemCard.descriere}}
    </p>
    <div>Price {{itemCard.price}}</div>
    <div>Size {{itemCard.size}}</div>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Add to Cart</button>
<!--    <button mat-button>Favorites</button>-->
  </mat-card-actions>
</mat-card>

<!--  </li>-->
<!--</ul>-->
  </mat-grid-tile>
</mat-grid-list>

内容的提问来源于stack exchange，提问作者DanM