Angular Material Mat-List-Option复选框列表无法渲染数据问题排查

Hey there! Let's work through getting those size checkboxes to show up properly—since your data source is populated, the issue is almost certainly a missing setup step or tiny syntax glitch. Here's what to check:

• Import the required Angular Material modules
  Angular Material components don't work out of the box—you need to add MatListModule (it includes the checkbox functionality for selection lists) to your module or standalone component.
  For a NgModule-based setup:

  import { MatListModule } from '@angular/material/list';
  
  @NgModule({
    imports: [
      // Your other existing imports
      MatListModule
    ]
  })
  export class YourFeatureModule { }
  

  For a standalone component:

  import { MatListModule } from '@angular/material/list';
  
  @Component({
    selector: 'your-component',
    templateUrl: './your-component.component.html',
    standalone: true,
    imports: [
      // Your other existing imports
      MatListModule
    ]
  })
  export class YourComponent { }
  

• Fix the syntax error in your template
  You've got an extra space in size .sizeName—this breaks Angular's property resolution. Remove the space to make it {{size.sizeName}}:

  <mat-selection-list #shoes>
    <mat-list-option *ngFor="let size of customer.productsizes">
      {{size.sizeName}}
    </mat-list-option>
  </mat-selection-list>
  

• Verify data is accessible in the template
  Even if you know the data exists, double-check it's available in the component's template scope. Add a quick debug line above the list to confirm:

  <!-- Debug to confirm data structure -->
  <pre>{{customer.productsizes | json}}</pre>
  <mat-selection-list #shoes>
    <!-- ... your list code -->
  </mat-selection-list>
  

  If this shows undefined or an empty array, wrap the list in an *ngIf to avoid rendering before data loads:

  <div *ngIf="customer">
    <mat-selection-list #shoes>
      <mat-list-option *ngFor="let size of customer.productsizes">
        {{size.sizeName}}
      </mat-list-option>
    </mat-selection-list>
  </div>
  

• Ensure Angular Material styles are loaded
  If components are invisible due to missing styles, add a prebuilt theme to your global styles (e.g., styles.css):

  @import '@angular/material/prebuilt-themes/indigo-pink.css';
  

Start with the first two steps—those are the most common fixes for this exact issue!

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