材质表单元格内的组件未正确呈现

Question

这是显示问题的STACKBLITZ。

我想在材料表中有一个材料进度条。

版本1

• 一切正常

版本2

• 颜色：Name是我直接使用mat-progress-bar的地方
• 颜色：Symbol与mat-progress-bar一起使用的组件不起作用。

问题：

• 为什么版本2不能按预期运行？
• 这是一个错误吗？

（我想使用Version2，因为我有CENTER列的CSS样式，因此表看起来很漂亮。）

Answer 1

看起来像CSS问题。

在您的自定义组件标签中添加width: 100%应该足够了：

@Component({
  selector: 'newComp',
  styles: [`
    :host {
      width: 100%;
    } 

  mat-progress-bar { height: 2em;}
  `],
  template: `...`,

})
export class newComp {

Forked Stackblitz