如何显示从代码初始化的 angular 组件？

Question

我有以下设置：

用户组件 HTML:

<div class="users">
  <ul class="users__list">
    <li *ngFor="let user of users"></li>
  </ul>
</div>

用户组件 TS:

import { Component, OnInit } from '@angular/core';
import { UserComponent } from '../user/user.component';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss'],
})
export class UsersComponent implements OnInit {
  users: UserComponent[] = [];

  ngOnInit(): void {
    this.users.push(new UserComponent('Test User'));
  }
}

用户组件HTML:

{{ name }}

用户组件 TS:

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
})
export class UserComponent {
  constructor(@Inject('name') public name: string) {}
}

我的目标是能够通过 new UserComponent('NAME'); 之类的代码动态地（例如使用按钮）生成新用户，并将他们添加到用户组件中的用户数组中。

我的问题是：如何显示从代码初始化的组件？

我试过这样的事情：

<div class="users">
  <ul class="users__list">
    <li *ngFor="let user of users">{{ user }}</li>
  </ul>
</div>

但这只是输出了“[object Object]”。

也许我的方法完全错误，但我认为这可能是最简单的解决方案，如果可行的话。

Answer 1

如何在模板中显示对象属性？

您使用的是一个对象，所以您必须在HTML中指明您要显示的对象属性是什么：

<div class="users">
  <ul class="users__list">
    <li *ngFor="let user of users">{{ user.name }}</li>
  </ul>
</div>

如何生成更多的项目并显示在列表中？

Angular，自动将您的 TS 变量与您的模板绑定。因此，只需使用 Angular 将更新视图的新用户更新您的用户列表。例如：

/* User.ts */
export class User {
 name: string;

 constructor(name: string) {
  this.name=name;
 }
}

/* UsersComponent.ts */
addUser() {
 const newUser = new User("I'm a new user!");
 this.users.push(newUser);
}

Answer 2

您需要跟踪大部分数据，Angular 会为您处理视图。

看看这个demo

如何显示从代码初始化的 angular 组件？

How can I display an angular component that is initialized from code?

components

dynamic

typescript

angular