Question

一段时间以来，我一直在为之动脑筋，无法一生找出错误所在。我有些是Angular的新手，所以很有可能我做错了很明显的事情。我有以下代码：

bucket.component.html

<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>

bucket-file.component.html

<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>

bucket-file.component.ts

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];
  }

}

console.log在 bucket-file.component.ts ngOnInit（）中工作，并返回正确的值，因此我知道输入在某种程度上可以正常工作。但是，当我尝试在模板HTML中显示它时，我什么也没得到。也没有错误。我对我做错了真的很困惑。任何帮助将不胜感激。

谢谢

Answer 1

我真是个好孩子。我之前已将bucket-file移到其自己的组件中，而忽略了将css移至新组件。因此，正如我对原始帖子的评论之一所建议的那样，背景颜色为白色，所有文本颜色也均为白色。就在那里，我只是看不到.... smh

Answer 2

您的代码似乎正确。

您确定CSS类card-title不会隐藏您的内容吗？

可以肯定的是，您可以这样写： <span class="card-title">Key : {{ key }}</span>
其他元素 （lastModified，...），它们显示了吗？
此外，您还可以在bucket.component.html组件中编写： <div class="col s12" *ngFor="let object of objects"> Key: {{ object.Key }} <app-bucket-file ... ></app-bucket-file> </div> 为了确保密钥没有被其他东西更改或移除 （在显示在子组件的ngOnInit()中之后）。

Angular 6 @input值未显示在HTML模板中

2 个答案: