網站搜尋

angular - 使用 @Input() 時的 TypeScript 錯誤


我正在嘗試使用 Angular 4 開發一個應用程式。但在使用時我收到了錯誤訊息

@Input('inputProducts') products: Product[];

錯誤是

[tslint] 在類別 "ProductListComponent" 中,指令輸入屬性 "products" 不應重新命名。請考慮使用以下方式 "@Input() products: string"(no-input-rename)。

這個錯誤沒有任何影響,我的應用程式運作正常,但它很惱人,而且我無法移除它。下面給出了程式碼片段:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Product } from '../product-row/product.model';
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  @Input('inputProducts') products: Product[];
  @Output() selectedProduct: EventEmitter<Product>;
  constructor() {
    this.selectedProduct = new EventEmitter();
  }
  clickedProduct(p: Product): boolean {
    this.selectedProduct.emit(p);
    return false;
  }
  ngOnInit() {
  }
}

HTML 部分

<app-product-list [inputProducts]="products"></app-product-list>

請指引我正確的方向來消除此錯誤。

答案#1

@Input() inputProducts: Product[]; 應該可以解決你的問題。

答案#2

這是一份風格指南,no-input-rename 是你應該設置為 false 的規則,以避免出現此類 tslint 錯誤。通常當你使用 Angular CLI 生成專案時,no-input-rename 會被設置為 true。打開你的 tslint 文件,將其值設為 false。應該看起來像這樣:"no-input-rename": false。