Javascript 角度7:Can'；t绑定到'；元素'；因为它不是'；这不是一个已知的属性

尝试运行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)

服务器元素.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 !'}];
}

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() {
  }

}

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
    // });
  }
}

服务器元素.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>

<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>

<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>

caffick.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>

<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>

<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>

添加新服务器或蓝图

服务器名
服务器内容


添加服务器
添加服务器蓝图

您的输入称为

srvElement

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

---

如果没有

Input

decorator参数，则Input和class属性应该是相同的。

您需要将参数删除到

@Input（）

---

实际上，如果上述方法似乎都不能解决问题，则您的输入名为

srvElement

，而不是

element

：

---

确保所有组件都在app.module.ts中注册

尽管我们知道它是app server元素的一个属性，因为我们将它定义为属性，它也是公共的，但我们仍然无法访问它。这是因为组件的所有属性只能在组件内部访问，不能从外部访问，这是一件非常好的事情，因为我们不希望所有属性都可以从外部绑定。因此，对于这一点，我们必须明确我们想要在外部公开哪些属性。因此，为了允许父组件能够绑定该属性，我们需要向该元素属性添加一些东西，即decorator@这里应该使用输入修饰符

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 !'}];
}

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() {
  }

}

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
    // });
  }
}

@Input() element: {}

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