Angular 7: не может привязаться к «элементу», так как это не известное свойство

Question

Я получаю ошибку ниже при попытке запустить угловой код:

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