Question

尝试运行Angular代码时出现以下错误：

Uncaught Error: Template parse errors:
Can't bind to 'element' since it isn't a known property of 'app-server-element'.
1. If 'app-server-element' is an Angular component and it has 'element' input, then verify that it is part of this module.
2. If 'app-server-element' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    <div class="col-xs-12">
      <app-server-element *ngFor="let serverElement of serverElements" [ERROR ->][element]="serverElement"></app-server-element>
    </div>
  </div>
"): ng:///AppModule/AppComponent.html@5:71
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11143)
    at JitCompiler._parseTemplate (compiler.js:25476)
    at JitCompiler._compileTemplate (compiler.js:25464)
    at compiler.js:25408
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25408)
    at compiler.js:25321
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25320)

app.component.html

<div class="container">
  <app-cockpit></app-cockpit>
  <hr>
  <div class="row">
    <div class="col-xs-12">
      <app-server-element *ngFor="let serverElement of serverElements" [element]="serverElement"></app-server-element>
    </div>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name: 'TestServer', content: 'Just a test !'}];
}

server-element.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
})
export class ServerElementComponent implements OnInit {
  @Input('srvElement') 
  element: { type: string, name: string, content: string };
  constructor() { }

  ngOnInit() {
  }

}

server-element.component.html

<div class="panel panel-default">
  <div class="panel-heading">{{ element.name }}</div>
  <div class="panel-body">
    <p>
      <strong *ngIf="element.type === 'sever'" style="color: red">{{ element.content }}</strong>
      <em *ngIf="element.type === 'blueprint'">{{ element.content }}</em>
    </p>
  </div>
</div>

server-element.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
})
export class ServerElementComponent implements OnInit {
  @Input('srvElement') 
  element: { type: string, name: string, content: string };
  constructor() { }

  ngOnInit() {
  }
}

cockpit.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-cockpit',
  templateUrl: './cockpit.component.html',
  styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {
  newServerName = '';
  newServerContent = '';

  constructor() { }

  ngOnInit() {
  }

  onAddServer() {
    // this.serverElements.push({
    //   type: 'server',
    //   name: this.newServerName,
    //   content: this.newServerContent
    // });
  }

  onAddBlueprint() {
    // this.serverElements.push({
    //   type: 'blueprint',
    //   name: this.newServerName,
    //   content: this.newServerContent
    // });
  }
}

cockpit.component.html

<div class="row">
  <div class="col-xs-12">
    <p>Add new servers or blueprint !</p>
    <label>Server Name</label>
    <input type="text" class="form-control" [(ngModel)]="newServerName">
    <label>Server Content</label>
    <input type="text" class="form-control" [(ngModel)]="newServerContent">
    <br>
    <button class="btn btn-primary" (click)="onAddServer()">Add Server</button>
    <button class="btn btn-primary" (click)="onAddBlueprint()">Add Server Blueprint</button>
  </div>
</div>

Answer 1

@Input('srvElement') 
element: { type: string, name: string, content: string };

您的输入称为srvElement。

<app-server-element [element]="serverElement"></app-server-element>

您正在尝试绑定到element输入，该输入不存在。

但是您无论如何都不应该重命名输入，只需更改为：

@Input()
element: { type: string, name: string, content: string };

在没有Input装饰器参数的情况下，input和class属性将是相同的。

Answer 2

您需要将参数删除到@Input()

实际上您的输入名为srvElement，而不是element

Answer 3

如果以上方法似乎都不能解决问题： 确保所有组件都已在app.modulte.ts中注册

Answer 4

尽管我们知道它是app-server-element的属性，但我们也将其定义为属性和公共属性，但仍然无法访问它。发生这种情况是因为组件的所有属性只能在组件内部访问，而不能从外部访问，这是一件好事，因为我们不希望所有属性都可以从外部绑定。因此，为此，我们必须明确要在外部公开的属性。因此，为使父组件能够绑定此属性，我们需要向该元素属性（即装饰器）添加一些内容。在这里应使用@input装饰器。

@Input() element: {}

还要确保从@ angular / core导入Input

角度7：无法绑定到“元素”，因为它不是的已知属性

4 个答案: