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

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

javascript angular

Javascript 如何在子组件中以角度显示来自父组件的对象数据,javascript,angular,Javascript,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.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将对象属性与表单字段绑定 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';
  }
}

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


服务器名
IP地址
物主
添加服务器
和我的子组件'server.component.ts`
从“@angular/core”导入{Component，Input}；
从“../servers/Server.model”导入{Server}；
@组成部分({
选择器：“应用程序服务器”，
templateUrl:'./server.component.html'，
风格：[
`
.在线{
颜色：白色；
}
`,
],
})
导出类服务器组件{
服务器状态='offline'；
@输入（）数据：服务器；
构造函数（）{
this.serverStatus=Math.random（）>0.5“联机”：“脱机；”；
}
getColor（）{
返回this.serverStatus=='online'？'green'：'red'；
}
}

my server.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';
  }
}

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


使用名称{{data}创建的服务器

我在上面的代码中发现了两个错误

在servers.component.html中使用ngModel时

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

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

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

34[（ngModel）]=“server.ipAddress”

获取所有字段的此错误

2.无法显示创建的服务器数据（无法将对象数据传递给子组件）在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';
  }
}

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

请帮忙。

提前感谢

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

servers.component.ts和.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>

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

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

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

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

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

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

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

server.component.ts和.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>

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

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

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

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

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

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

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

使用名称{data}}创建的服务器应为{{data.serverName}，不能使用字符串插值绑定对象。该模型中的构造函数看起来很奇怪