Angular 重新订阅一个请求

我有一个父组件，它是一个表单，当我添加一个用户时，它应该显示在屏幕右侧的一个边栏中，该边栏是一个子组件。问题是，当我在数据库中插入时，它不会更新用户列表。它只在我重新加载页面时更新。 因此，我试图重新运行http请求以恢复用户，但我没有刷新子级的视图

这是父组件的HTML：

<form [formGroup]="form">
   ........ 
  <button (click)="OnSubmit()" >Add User</button>
  </form>
  <app-sidebar [users]="users"></app-sidebar>  

这是我的子组件的HTML

<nav id="sidebar">
        <div class="sidebar-header">
            <h3>Usre</h3>
        </div>
        <ul *ngFor="let user of users">
            <li>ID {{user.id}}</li>
            <li>Name: {{user.name}}</li>
        </ul>
    </nav>

在这里，我还保留了我为获得用户所做的服务

getUsers(){
    return this.http.get(`localhost:8000/users`);
  }

---

我想试试这样的东西：

myUserService.service.ts

...

users:User[] = [];

...
getUsers(){
 return (this.users)
}

addUser(user:User){
  this.users.push(user)
}
...

服从

onSubmit(){
   //POST request is here
   this.userService.createUser(this.data).subscribe(
      (resp) => {
        //if POST request i susccesfull then add a user to you global users variable
        if (resp.status === 'success')
           myUserService.addUser(resp.user)
        console.log(resp)
      },
      (error) => console.log(error)
   );
}

子组件HTML

<nav id="sidebar">
  <div class="sidebar-header">
    <h3>Usre</h3>
  </div>
  <ul *ngFor="let user of users">
    <li>ID {{user.id}}</li>
    <li>Name: {{user.name}}</li>
  </ul>
</nav>

---

如果不清楚，请告诉我添加用户后，您没有向子组件发送更新的用户列表。您可以在子组件中创建

@Input（）

属性，并从父组件发送数据：

<form [formGroup]="form">
   ........ 
  <button (click)="OnSubmit()" >Add User</button>
  </form>
  <app-sidebar [users]="users"></app-sidebar>  

child.component.ts：

export class ChildComponent {
  //@Input() count: number;

  _count: number = 0;

  @Input()
  set count(count: number) {
    this._count = count;
    console.log(count);
  }
}

parent.html：

<app-child [count]="counter"></app-child>

---

你能对它做一个简单的介绍吗？请不要确定你想在这里实现什么。如果请求成功，

getUsers

仅被调用一次（订阅将不会在设置中重新触发），则可以通过post请求和用户阵列内的推送来添加用户。ngonInit中的subscribe用于使getUsers执行，但在它自身中是一次性的。在onSubmit中，您应该使用

this.user={…this.user，…res}

，而不是调用新的GET请求，其中res是POST请求的响应。

export class ChildComponent {
  //@Input() count: number;

  _count: number = 0;

  @Input()
  set count(count: number) {
    this._count = count;
    console.log(count);
  }
}

<app-child [count]="counter"></app-child>

export class ParentComponent {
  title = 'Component Interaction';
  counter = 5;

  increment() {
    this.counter++;
  }

  decrement() {
    this.counter--;
  }
}