Как отобразить данные объекта в дочернем компоненте из родительского в angular

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

в server.component. html Я использую ngModel чтобы связать свойство объекта с полем форм servers.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';
  }
}

my server.component. html

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

Я получаю две ошибки в приведенном выше коде

1. при использовании ngModel в server.component. html

   ошибка TS2339: свойство 'ipAddress' не существует для типа 'Server []'.

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

получение этой ошибки для всего поля

2. не удается отобразить созданные данные сервера (невозможно передать данные объекта дочернему компоненту) вызывая дочерний компонент в server.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;
  }
}