使用 @Input() 时出现 TypeScript 错误答案

【问题标题】：TypeScript Error While Using @Input()使用 @Input() 时出现 TypeScript 错误
【发布时间】：2020-08-13 04:45:21
【问题描述】：

我正在尝试使用 Angular 4 开发一个应用程序。但是我在使用时收到了一条错误消息

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

错误是

[tslint] 在“ProductListComponent”类中，指令输入属性“产品”不应重命名。请考虑以下使用“@Input() products: string”（无输入重命名）。

错误没有任何影响，我的应用程序运行正常，但很烦人，无法删除。代码片段如下：

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>

请指向正确的方向以消除此错误。

【问题讨论】：

HTML 是什么样子的，请完全更新
您在发帖前阅读了错误信息吗？它告诉你如何摆脱错误;)

标签： angular typescript angularjs-directive

【解决方案1】：

@Input() inputProducts: Product[]; 应该可以解决您的问题。

【讨论】：

这其实不是我想要达到的。

【解决方案2】：

这是样式指南，no-input-rename 应该设置为 false 的规则，以免出现此类 tslint 错误。 no-input-rename 通常在使用 Angular CLI 生成项目时设置为 true。转到您的 tslint 文件并使其值等于false。应该类似于："no-input-rename": false。

【讨论】：

【解决方案3】：

products: Product[];

@Input('inputProducts')
set productsFromInput(projects: Project[]) {
  this.products = products;
}

【讨论】：