Блог

Главная - Вопросы по программированию - Angular не может привязываться к «продукту», так как это неизвестное свойство «карты приложений-продуктов»

Angular не может привязываться к «продукту», так как это неизвестное свойство «карты приложений-продуктов»

#angular

Вопрос:

Я сделал импорт в BrowserModule и в ReactiveFormsModule, но все равно получил эту ошибку привязки.

Я использую государственную службу для получения массива prudcts с сервера..

Это домашний компонент

 <div class="product-container" *ngFor="let product of stateService.products| category:stateService.categoryId">
<app-products-card  [product]="product"></app-products-card>
</div>

Это из дома.ts

 export class HomeComponent implements OnInit {

  products: IProducts[] = []

  constructor(
    public stateService: StateService,
    public productServices: ProductService,
    private router: Router,
    private route: ActivatedRoute,

  ) { }

Это компонент продукта

 <div class="card productsCard" style="width: 18rem">
  <img
    [src]="product.image"
    alt="{{ product.productName }}"
    width="250px"
    class="card-img-top"
    style="cursor: pointer"
  />
  
  <div class="card-body">
    <h5 class="card-title">{{ product.productName | titlecase }}</h5>
    <p class="card-text"> {{ product.price }}</p>
    <a *ngIf="stateService.isLoggedIn amp;amp; !isAddToCartBtnClicked"  href="#" class="btn btn-primary">ADD</a>
    <div *ngIf="isAddToCartBtnClicked">
      Amount: <input type="number" [(ngModel)]="amount"/>

    </div>
  </div>
</div>

Импорт:

 @NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RoutingModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    HttpClientModule,
    FormsModule,
    TableModule,
  ],
  
  providers: [],
  bootstrap: [AppComponent]
})

Комментарии:

1. можете ли вы предоставить файл ts компонента, который может помочь

2. Возможно, это происходит из-за того, что служба является частной, и вы получаете к ней доступ из шаблона, почему вы не помещаете stateService.products в переменную/свойство,

3. является ли продукт компонентом @input в карточке приложений-продуктов ?

4. Я добавляю сегмент из home.ts , и что вы имеете в виду, если продукт является @input ?

5. Это официальные документы angular.io/guide/inputs-outputs и это пример guide-angular.wishtack.io/angular/interaction-entre-composants/…

Ответ №1:

Вам нужно добавить @Input() в свой AppProductsCardComponent

 export class AppProductsCardComponent implements OnInit {

  @Input() product: IProducts; //Add @Input()

  constructor(
    public stateService: StateService,
    public productServices: ProductService,
    private router: Router,
    private route: ActivatedRoute,

  ) { }

Комментарии:

1. Да , вот и все, я добавил @Input в свой AppProductsCardКомпонент, и это было исправлено. Большое спасибо!

Ответ №2:

Добавьте в product.component.ts @Input() продукт; С уважением.

Ответ №3:

Похоже , что в AppProductCardComponent , вы пропустили добавление продукта в качестве Input поля. С помощью Angular вы можете передавать значение компоненту только в том случае, если вы добавили поле ввода() в тот компонент, которому требуется передать значение из родительского компонента.

Как показано ниже:

 @Component({
   selector: 'app-demo-comp',
   template: '<div>{{msg}}</div>
})
class DemoComponent {
    @Input() msg: string;
}

Вот как вы можете его использовать: <app-demo-comp [msg]="'demo'"></app-demo-comp>

Метки: ,