Can't bind to XXX since it isn't a known property of 问题处理办法

在处理 Angular 组件传值的情况中,容易出现如题所说的报错,一般情况下都是由于语法使用不正确导致,或者是新手不了解具体的使用方法。

检查语法

  1. 检查模块引入
1
import { Injectable, Component, OnInit, Input } from '@angular/core';
  1. 检查声明
1
2
@Input test: any;   // 错误
@Input() test: any; // 正确

( 我就在这里跌倒过,忘记写括号还到处找问题 … )

  1. 检查传参
1
<select [options]="test"></select>
  1. 检查组件注册
1
2
3
4
5
app.module.ts

@NgModule({
declarations: [],
)}

组件必须要在 declarations 中注册。

官方组件传值示例

输入型属性,它们通常带@Input装饰器,第二个@Input为子组件的属性名masterName指定一个别名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// child.component.ts

import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
selector: 'app-hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})

export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// parent.component.ts

import { Component } from '@angular/core';
import { HEROES } from './hero';

@Component({
selector: 'app-hero-parent',
template: `
<h2>{{master}} controls {{heroes.length}} heroes</h2>
<app-hero-child *ngFor="let hero of heroes"
[hero]="hero"
[master]="master">
</app-hero-child>
`
})

export class HeroParentComponent {
heroes = HEROES;
master = 'Master';
}

具体可查阅 官方示例

分享到 评论