如何以角度显示来自父级的子组件中的对象数据

Question

我是 Angular 的初学者。 我创建了一个演示应用程序。 下面是我的代码

servers.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Server } from './server.model';
@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css'],
})
export class ServersComponent implements OnInit {
  allowNewServer = false;
  serverCreationStatus = 'no server created';
  serverName = '';
  ipAddress = '';
  owner = '';
  server: Server[] = [];
  serverCreated = false;
  constructor() {

  }
  ngOnInit(): void {}

  onCreateServer() {
    this.serverCreated = true;
    this.serverCreationStatus = 'server created';
    this.server_list.push(server;
    }
}

我有一个模型文件，我在其中声明了一个类和构造函数来创建服务器

server.model.ts
export class Server {
  public serverName: string;
  public ipAddress: string;
  public owner: string;

  constructor(ame: string, ip: string, owner: string) {
    this.serverName = name;
    this.ipAddress = ip;
    this.owner = owner;
  }
}

在 servers.component.html 我使用 ngModel 将对象属性与表单字段绑定 服务器.component.html

<form action="">
    <div class="row">
      <label for="serverName" class="col-sm-2">Server Name</label>
      <input
        type="text"
        class="form-control col-sm-10"
        [(ngModel)]="server.serverName"
        [ngModelOptions]="{ standalone: true }"
      />
    </div>
    <div class="row">
      <label for="ipAddress" class="col-sm-2">IP Adress</label>
      <input
        type="text"
        class="form-control col-sm-10"
        [(ngModel)]="server.ipAddress"
        [ngModelOptions]="{ standalone: true }"
      />
    </div>
    <div class="row">
      <label for="owner" class="col-sm-2">Owner</label>
      <input
        type="text"
        class="form-control col-sm-10"
        [(ngModel)]="server.owner"
        [ngModelOptions]="{ standalone: true }"
      />
    </div>
    <button
      class="btn btn-primary"
      [disabled]="!allowNewServer"
      (click)="onCreateServer()"
    >
      Add server
    </button>
  </form>
<app-server *ngFor="let s of server" [data]="s"> </app-server>




and my child component `server.component.ts`

import { Component, Input } from '@angular/core';
import { Server } from '../servers/server.model';
@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styles: [
    `
      .online {
        color: white;
      }
    `,
  ],
})
export class ServerComponent {
  serverStatus = 'offline';
  @Input() data: Server;

  constructor() {
    this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline;';
  }
  getColor() {
    return this.serverStatus === 'online' ? 'green' : 'red';
  }
}

我的 server.component.html

<p
  [ngStyle]="{ backgroundColor: getColor() }"
  [ngClass]="{ online: serverStatus === 'online' }"
>
  Server created with name {{ data }}
</p>

我在上面的代码中有两个错误

1. 在 servers.component.html 中使用 ngModel 时

   错误 TS2339：“服务器 []”类型上不存在属性“ipAddress”。

   34 [(ngModel)]="server.ipAddress"

所有字段都出现此错误

2.无法显示创建的服务器数据（无法将对象数据传递给子组件） 在servers.component.html中调用子组件

请帮忙。 提前致谢

Answer 1

您的错别字和错误太多，这里是更新的服务器和服务器组件类，将其与您的问题进行比较，您可以找出差异和错误。希望这行得通！

servers.component .ts & .html：

.html:

<form action="">
  <div class="row">
    <label for="serverName" class="col-sm-6">Server Name</label>
    <input
      id="serverName"
      type="text"
      class="form-control col-sm-10"
      [(ngModel)]="serverName"
      [ngModelOptions]="{ standalone: true }"
    />
  </div>
  <div class="row">
    <label for="ipAddress" class="col-sm-6">IP Adress</label>
    <input
      id="ipAddress"
      type="text"
      class="form-control col-sm-10"
      [(ngModel)]="ipAddress"
      [ngModelOptions]="{ standalone: true }"
    />
  </div>
  <div class="row">
    <label for="owner" class="col-sm-6">Owner</label>
    <input
      id="owner"
      type="text"
      class="form-control col-sm-10"
      [(ngModel)]="owner"
      [ngModelOptions]="{ standalone: true }"
    />
  </div>
  <button
    class="btn btn-primary"
    (click)="onCreateServer()">
    Add server
  </button>
</form>
<app-server *ngFor="let s of server" [data]="s"> </app-server>

.ts:

import { Component, OnInit } from '@angular/core';
import {Server} from '../../models/Server.model';

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {

  allowNewServer = false;
  serverCreationStatus = 'no server created';
  serverName = '';
  ipAddress = '';
  owner = '';
  server: Server[] = [];
  serverCreated = false;
  constructor() {

  }
  ngOnInit(): void {}

  onCreateServer() {
    this.serverCreated = true;
    this.serverCreationStatus = 'server created';
    this.server.push(new Server(this.serverName, this.ipAddress, this.owner));
  }
}

server.component .ts & .html：

.html:

<p
  [ngStyle]="{ backgroundColor: getColor() }"
  [ngClass]="{ online: serverStatus === 'online' }">
  Server created with name {{ data.serverName }}
</p>

.ts:

import {Component, Input} from '@angular/core';
import {Server} from '../../models/Server.model';

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent {

  @Input() data: Server;
  serverStatus = 'offline';

  constructor() {
    this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline;';
  }
  getColor() {
    return this.serverStatus === 'online' ? 'green' : 'red';
  }
}

终于服务器模型类：

export class Server {
  public serverName: string;
  public ipAddress: string;
  public owner: string;

  constructor(name: string, ipAddress: string, owner: string) {
    this.serverName = name;
    this.ipAddress = ipAddress;
    this.owner = owner;
  }
}