Angular Material mat-grid-tile内容为空排查求助

1. 检查app-kit组件的输入属性定义 #

确保app-kit组件中正确接收kit输入，必须使用@Input()装饰器，且类型与父组件传递的kit对象匹配：

import { Component, Input } from '@angular/core';
import { Kit } from './path-to-your-kit-interface';

@Component({
  selector: 'app-kit',
  templateUrl: './kit.component.html'
})
export class KitComponent {
  @Input() kit!: Kit;
}

2. 验证app-kit组件模板的渲染逻辑 #

检查kit.component.html是否正确引用了传入的kit属性，比如：

<!-- 示例模板，根据实际数据结构调整 -->
<div class="kit-content">
  <h4>{{ kit.name }}</h4>
  <p>{{ kit.author }}</p>
</div>

若模板未使用kit的任何属性，组件自然会显示为空。

3. 调整mat-grid-tile的高度设置 #

你当前设置了rowHeight="100px"，如果app-kit组件内容高度超出该值，会被裁剪或隐藏。可临时移除rowHeight属性，或改为自适应值测试：

<mat-grid-list cols="4" gutterSize="16px">
  <mat-grid-tile *ngFor="let kit of kitList">
    <app-kit [kit]="kit"></app-kit>
  </mat-grid-tile>
</mat-grid-list>

4. 确认app-kit组件的模块声明状态 #

确保父组件所在的模块中，已正确声明KitComponent：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatGridListModule } from '@angular/material/grid-list';
import { KitComponent } from './kit/kit.component';
import { ParentComponent } from './parent/parent.component';

@NgModule({
  declarations: [ParentComponent, KitComponent],
  imports: [CommonModule, MatGridListModule]
})
export class YourFeatureModule { }

5. 调试输入值的传递情况 #

在app-kit组件中添加ngOnChanges钩子，打印输入值确认数据是否正确传入：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-kit',
  templateUrl: './kit.component.html'
})
export class KitComponent implements OnChanges {
  @Input() kit!: Kit;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('传入的kit数据:', changes['kit']?.currentValue);
  }
}

打开浏览器控制台，查看是否有正确的kit数据输出。

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