*ngFor 引发错误，其次图像未调整大小答案

【问题标题】：*ngFor throwing errors and secondly image not getting resized*ngFor 引发错误，其次图像未调整大小
【发布时间】：2020-03-24 21:22:45
【问题描述】：

我正在使用 Angular。我使用 *ngFor 来创建六个产品案例（3 行 2 列）：

  <div class="Game">
    <div class="UpgradeContainer">
      <div class="Upgrade" (click)="setModal('Unlock')">Unlocks</div>
      <div class="Upgrade" (click)="setModal('Cash')">Cash</div>
      <div class="Upgrade" (click)="setModal('Angels')">Angels</div>
      <div class="Upgrade" (click)="setModal('Managers')">Managers</div>
      <div class="Upgrade" (click)="setModal('Investors')">Investors</div>
    </div>
    <div class="ProductContainer">
      <app-product *ngFor="product of products" [product]="products"></app-product>
    </div>
</div>

但它会引发以下错误

这是我的 *ngFor 出现无法解决的错误的地方。我想确切地说我正在使用它来创建六个产品案例（3 行 2 列）：

第一个错误是：

{
    "resource": "/d:/AngularProject/src/app/app.component.html",
    "owner": "_generated_diagnostic_collection_name_#2",
    "severity": 8,
    "message": "Property binding ngFor not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the \"@NgModule.declarations\".",
    "source": "ng",
    "startLineNumber": 27,
    "startColumn": 7,
    "endLineNumber": 27,
    "endColumn": 70
}

留言：

属性绑定 ngFor 未被嵌入模板上的任何指令使用。确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”中。

第二个错误是：

{
    "resource": "/d:/AngularProject/src/app/app.component.html",
    "owner": "_generated_diagnostic_collection_name_#2",
    "severity": 8,
    "message": "Can't bind to 'ngFor' since it isn't a known property of 'app-product'.\n1. If 'app-product' is an Angular component and it has 'ngFor' input, then verify that it is part of this module.\n2. If 'app-product' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.",
    "source": "ng",
    "startLineNumber": 27,
    "startColumn": 20,
    "endLineNumber": 27,
    "endColumn": 48
}

留言：

无法绑定到“ngFor”，因为它不是“app-product”的已知属性。 1. 如果 'app-product' 是一个 Angular 组件并且它有 'ngFor' 输入，那么验证它是这个模块的一部分。 2. 如果“app-product”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 3. 要允许任何属性添加“NO_ERRORS_SCHEMA”到该组件的“@NgModule.schemas”。

我的第二个问题是我无法调整产品图片的大小。

这是灾难的图像：

Image that does not resize

这是我使用的代码：

.ProductImage{
  width: 50px;
  height: 50px;
  border-radius: 50%
}

<div class="Product">
  <div class="ProductImage"> <img src="./assets/Avatar.jpg"> </div>
  <br>
  <div class="ProductNumber">ProductNumber</div>
  <br>
  <div class="ProductPrice">ProductPrice</div>
  <br>
  <div class="ProductProgressBar">ProductProgressBar</div>
</div>

这是我的目录结构

Project Structure

提前感谢任何愿意帮助我的人。我是 HTML/CSS/Angular 的初学者。祝你有美好的一天。

【问题讨论】：

你没有给 img 上课，最好给它上课并应用 css
你能分享你的代码，这样我就可以在我的机器上运行它并告诉你发生了什么或stackblitz的链接？
哦，我现在明白为什么我不能调整图片大小了，谢谢。以及如何共享代码，是否复制每个文件内容并将其放在我的问题主题中？

标签： html css angular visual-studio-code

【解决方案1】：

试试这个

 <app-product *ngFor="let product of products" [product]="product"></app-product>

至于图片大小调整，给图片标签一个单独的类

  <div class="ProductImage"> <img class="product-image" src="./assets/Avatar.jpg"> </div>

和 CSS

.product-image{
  width: 50px;
  height: 50px;
  border-radius: 50%
}

【讨论】：

完美地工作，顺便我看看我的错误在哪里。非常感谢！
欢迎...如果您认为此答案正确，请点赞并将其标记为正确。
不能投票，因为我的名声不够抱歉，伙计……但我将其标记为正确：D。

【解决方案2】：

要解决 ngFor 问题，您需要在声明组件的模块中导入 BrowserModule。在您的情况下，它可能是 app.module.ts

确保添加这些：

@NgModule({
  declarations: [ProductComponent],
imports: [BrowserModule],
})

【讨论】：

我已经做到了。但似乎错误来自我的应用产品应答器的语法。