想要創建一個物件陣列以顯示為具有不同值的組件-有解無憂

在我的 HTML 中，我使用 *ngFor 來顯示我的服務器陣列。真的不知道從這里去哪里以及我做錯了什么。我已經用谷歌搜索了幾個小時，但找不到正確的方法。它只是令人沮喪..

1 第一個組件：

@Component({
  selector: 'app-server',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServerComponent implements OnInit {
  serverId: number;
  serverName: string;
  serverStatus: string;

  constructor(id: number, name: string, status: string) {
    this.serverId = id;
    this.serverName = name;
    this.serverStatus = status;
  }
}

2 第二部分：

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


    constructor() {
        this.servers = [];
        this.serverObj = new ServerComponent(0, "testN", "testS");
      }

  createServer() {
      this.servers.push(this.serverObj);
    }
  }
}

3 錯誤資訊：

Compiled with problems:

ERROR

src/app/app.module.ts:12:5 - error NG6001: The class 'ServerComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

12     ServerComponent,
       ~~~~~~~~~~~~~~~

  src/app/server/server.component.ts:9:14
    9 export class ServerComponent implements OnInit {
                   ~~~~~~~~~~~~~~~
    'ServerComponent' is declared here.


ERROR

src/app/server/server.component.ts:14:15 - error NG2003: No suitable injection token for parameter 'id' of class 'ServerComponent'.
  Consider using the @Inject decorator to specify an injection token.

14   constructor(id: number, name: string, status: string) {
                 ~~

  src/app/server/server.component.ts:14:19
    14   constructor(id: number, name: string, status: string) {
                         ~~~~~~
    This type is not supported as injection token.

uj5u.com熱心網友回復：

組件建構式僅用于依賴注入。您通常也不通過 JS 創建組件的實體，您只需將它們的標簽添加到 html 檔案中。

如果您想要一個具有常規建構式的類，只需使用常規類。如果您想將該資料從一個組件傳遞到另一個組件，有幾種方法可以做到這一點，具體取決于您的用例。

我不能確切地說出你在做什么，但看起來你需要這兩個組件，所以你需要另一個類來保存資料。

export class Server implements OnInit {
  serverId: number;
  serverName: string;
  serverStatus: string;

  constructor(id: number, name: string, status: string) {
    this.serverId = id;
    this.serverName = name;
    this.serverStatus = status;
  }
}

然后，您可以像嘗試做的那樣實體化您的服務器陣列。通常你ngOnInit在組件中使用生命周期鉤子，因為建構式主要用于 DI。這就是組件默認實作介面的原因。

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

   ngOnInit() {
      this.servers.push(new Server(0, "testN0", "testS0"));
      this.servers.push(new Server(1, "testN1", "testS1"));
      this.servers.push(new Server(2, "testN2", "testS2"));
   }
}

要將單個服務器傳遞給每個服務器，ServerComponent您可以通過添加@Input()屬性來實作。

@Component({
  selector: 'app-server',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServerComponent implements OnInit {
  @Input() server?: Server;

   ngOnInit() {
      console.log(this.server);
   }
}

您還可以提供默認值而不是使用?.

@Input()允許您通過 html 將資料輸入到組件中。ngFor*還可以讓您遍歷陣列，為陣列中的每個條目創建一個組件。

所以在servers.component.html

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

方括號表示輸入屬性。

這將創建三個實體，ServerComponent當您實體化一個ServersComponent.

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/490458.html

標籤：有角度的打字稿

上一篇：角度編譯錯誤：型別訂閱缺少來自型別物件[]的以下屬性：長度、彈出、推送、連接

下一篇：Angular：當我按“n”鍵時，在輸入欄位日期中，我希望我的一天移到第二天