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

Posted 2023-02-23

【中文标题】如何显示从代码初始化的角度组件？

【英文标题】：How can I display an angular component that is initialized from code?

【发布时间】：2021-10-10 11:40:16

【问题描述】：

我有以下设置：

用户组件 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]'。

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

【参考方案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);

【参考方案2】：

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

看看这个demo