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

【问题标题】：Angular 6 @input value not showing up in HTML templateAngular 6 @input 值未显示在 HTML 模板中
【发布时间】：2018-10-24 11:38:56
【问题描述】：

我已经为此绞尽脑汁了一段时间，但终其一生都无法弄清楚哪里出了问题。我有点像 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 中显示它时，我什么也得不到。也没有错误。我真的很困惑我做错了什么。任何帮助将不胜感激。

谢谢

【问题讨论】：

你能对你的问题进行一次堆栈闪电战吗？
背景是白色的吗？ :-)
它在 NgInit 上工作得很好，因为您正在使用组件对其进行初始化，所以将它加载到 ngOnInit 中的一个变量中......这将起作用

标签： javascript html angular angular6

【解决方案1】：

我真是个笨蛋。我之前已经将存储桶文件移动到它自己的组件中，而忽略了将 css 移动到新组件中。因此，正如我原帖中的一位 cmets 所建议的那样，背景颜色为白色，所有文本颜色也为白色。就在那里，我只是看不到它.... smh

【讨论】：

你应该删除你的问题，它没有信息价值

【解决方案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() 之后）。

【讨论】：