* ngДля выдачи ошибок и, во-вторых, размер изображения не изменяется

Question

Iam используя 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' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение. 3. Чтобы разрешить любое свойство, добавьте «NO_ERRORS_SCHEMA» к «@ NgModule.schemas» этого компонента.

Моя вторая проблема заключается в том, что я не могу изменить размер изображений продукта.

Вот изображение бедствия:

Изображение без изменения размера

Вот код, который я использовал:

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

Вот моя структура каталогов

Структура проекта

Заранее спасибо всем, кто хотел бы помочь мне. Я новичок в HTML / CSS / Angular. Хорошего дня.

Answer 1

Для решения проблемы ngFor вам необходимо импортировать BrowserModule в модуль, где вы объявите свой компонент. В вашем случае это, вероятно, app.module.ts

Убедитесь, что добавили:

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

Answer 2

Попробуйте это

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