Question

我试图创建一个简单的应用程序，允许您添加服务器并为其命名并选择类型。现在我通过在app组件中使用一个数组来工作，但是，在尝试创建一个＆＃34; server.model＆＃34;文件概述了一个服务器元素，并创建了数组来推送内容，我无法弄清楚如何将数据推送到正确的位置。 app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AngularFontAwesomeModule } from 'angular-font-awesome/angular-font-awesome';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ElementComponent } from './element/element.component';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    ElementComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgbModule.forRoot(),
    AngularFontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html：

<div class="container">
  <app-dashboard
    (serverCreated)="onServerAdded($event)"></app-dashboard>
    <div class="card-group">
      <app-element *ngFor="let server of servers"
      [srvElement]="servers"></app-element>
    </div>
</div>

app.component.ts：

import { Component } from '@angular/core';
import { Server, servers } from './server.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  servers: Server[] = servers;
  onServerAdded(serverData: {serverName: string, serverType: string}) {
    servers.push({
      name: serverData.serverName,
      type: serverData.serverType,
      online: true
    });
  }
}

server.model.ts：

export class Server {
  constructor(
    public name: string,
    public type: string,
    public online: boolean
  ) {}
}
export const servers: Server[] = [
  {
    name: 'web.server.com',
    type: 'server',
    online: true
  }
];

dashboard.component.html：

<div class="row">
  <form #serverForm="ngForm">
    <div class="form-group">
      <label for="name">Server Name</label>
      <input id="name" type="text" name="name" class="form-control" [(ngModel)]="newServerName">
    </div>
    <div class="form-group">
      <label for="type">Server Type</label>
      <select class="form-control" id="type" name="type" [(ngModel)]="newServerType">
        <option value="server">Web Server</option>
        <option value="database">Database</option>
        <option value="wordpress">Wordpress</option>
      </select>
    </div>
    <button
      class="btn btn-primary"
      (click)="onAddServer(); serverForm.reset()">Add Server</button>
  </form>
</div>

dashboard.component.ts：

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  @Output() serverCreated = new EventEmitter<{serverName: string, serverType: string, serverOnline: boolean}>();
  newServerName = '';
  newServerType = '';
  newServerOnline = true;
  constructor() { }

  ngOnInit() {
  }
  onAddServer(){
    this.serverCreated.emit({serverName: this.newServerName, serverType: this.newServerType, serverOnline: this.newServerOnline})
  }
  onPowerServer() {

  }

}

element.component.html：

<div class="card">
  <span class="text-center mt-2"><fa name="{{element.type}}" size="5x"></fa></span>
  <div class="card-body pt-0">
    <h4 class="card-title m-0">{{ element.name }}</h4>
    <p class="card-text pt-0"><small class="text-muted">{{ element.status}}</small></p>
  </div>
</div>

element.component.ts：

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

@Component({
  selector: 'app-element',
  templateUrl: './element.component.html',
  styleUrls: ['./element.component.css']
})
export class ElementComponent implements OnInit {
  @Input('srvElement') element: {type: string, name: string, online: boolean};
  constructor() { }

  ngOnInit() {
  }

}

我认为我取得了一些进展，我相信我现在正在将数组推送到server.model.ts中定义的数组，但现在我的：

<app-element *ngFor="let server of servers"
      [srvElement]="server"></app-element>

未列出默认服务器。

Answer 1

属性绑定不正确。
将您的servers []数组添加到app.Componenet中，将服务器绑定到应用程序视图。

import { Server, servers } from './server.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  servers: Server[] = servers;
  onServerAdded(serverData: {serverName: string, serverType: string}) {
    servers.push({
      name: serverData.serverName,
      type: serverData.serverType,
      online: true
    });
  }
}

Angular 4 - 将数组推送到另一个文件中的数据模型

1 个答案: