Javascript 角度6@输入值未显示在HTML模板中

我为此绞尽脑汁已经有一段时间了，我一辈子都弄不清楚到底出了什么问题。我是一个有点棱角分明的新手，所以我很有可能做了一些非常明显的错事。我有以下代码：

bucket.component.html

bucket-file.component.html

bucket-file.component.ts

console.log在bucket-file.component.ts ngonit中工作并返回正确的值，因此我知道输入在某种程度上起作用。然而，当我试图在HTML模板中显示它时，我什么也得不到。也没有错误。我真的很困惑我做错了什么。任何帮助都将不胜感激

---

谢谢

您的代码似乎正确

你确定CSS类卡片标题没有隐藏你的内容吗

当然，你可以写： 密钥：{{Key}}

上次修改的其他元素如何，…，是否显示

此外，在bucket.component.html组件中，您可以编写： 键：{{object.Key} 确保键在子组件的ngOnInit中显示后不会被其他内容更改或删除

---

我真是个笨蛋。我之前将bucket文件移动到它自己的组件中，而忽略了将css移动到新组件中。因此，正如我在原始帖子上的一条评论所说，背景颜色是白色的，所有的文本颜色也是白色的。都在那里，我就是看不见。。。。smh

你能对你的问题进行一次闪电战吗？背景是白色的吗-它在ngonit上工作，因为您正在用组件初始化它，所以将它加载到ngonit中的变量中。。那就行了

<div class="container">
  <div class="row">
    <div class="col s12">
      <div id="backButton">
        <a class="valign-wrapper" (click)="navigateBack()"><i class="material-icons">arrow_back</i> Back</a>
      </div>
      <h2 class="center-align" id="title">{{ name }}</h2>
    </div>
  </div>
  <div class="row">
    <div class="col s12" *ngFor="let object of objects">
      <app-bucket-file [key]="object.Key" [lastModified]="object.LastModified" [size]="object.Size" [owner]="object.Owner.DisplayName"></app-bucket-file>
    </div>
  </div>
</div>

<div class="card valign-wrapper">
  <div class="card-content white-text">
    <span class="card-title">{{ key }}</span>
    <p>Last Modified: {{ lastModified | date:'short' }}</p>
    <p>Size: {{ conversion(size, 2) }}</p>
    <p>Owner: {{ owner }}</p>
  </div>
</div>

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

@Component({
  selector: 'app-bucket-file',
  templateUrl: './bucket-file.component.html',
  styleUrls: ['./bucket-file.component.css']
})
export class BucketFileComponent implements OnInit {
  @Input() key: string;
  @Input() lastModified: string;
  @Input() size: number;
  @Input() owner: string;
  public conversion = BucketFileComponent.bytesToSize;
  constructor() { }

  ngOnInit() {
    console.log('Key:' + this.key);
  }

  public static bytesToSize(bytes: number, decimals: number) {
    const sizes = ['Bytes', 'KB', 'MB', 'GB,', 'TB'];
    if (bytes === 0) {
      return '0 Bytes';
    }
    const k = 1024,
      dm = decimals <= 0 ? 0 : decimals || 2,
      i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
  }

}