Блог

Главная - Вопросы по программированию - Повторная подписка на угловой запрос

Повторная подписка на угловой запрос

#angular #typescript

#angular #typescript

Вопрос:

У меня есть родительский компонент, представляющий собой форму, которая при добавлении пользователя должна отображаться справа от экрана на боковой панели, которая является дочерним компонентом. Проблема в том, что когда я вставляю в базу данных, она не обновляет список пользователей. Он обновляется только при перезагрузке страницы. Итак, я пытаюсь повторно запустить http-запрос, чтобы вернуть пользователей, но я не обновляю представление дочернего элемента.

Это мой HTML родительского компонента:

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

Это мой TS, где есть функция onSubmit, куда я добавляю пользователей:

 users = [];
constructor(private userService:UserService) { }
ngOnInit(): void {
  this.getUsers();
}

getUsers(){
this.userService.getUsers().subscribe(
    (resp: any) => this.users = resp,
    error => console.log(error)
  )}
OnSubmit() {
 this.userService.createUser(this.data).subscribe(
    () => this.getUsers(),
    (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>

И это TS

 export class SidebarComponent implements OnInit {
 @Input() users;
 constructor() { }
 ngOnInit(): void {
   }
}

Здесь я также оставляю службу, которую я делаю, чтобы привлечь пользователей

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

Комментарии:

1. не могли бы вы сделать из этого stackblitz, пожалуйста, не уверены, что понимаете, чего вы пытаетесь достичь здесь. добавление пользователя может быть выполнено с помощью запроса post и нажатия внутри пользовательского массива, если запрос выполнен успешно

2. Это getUsers вызывается только один раз (subscribe не будет повторно запускать его в вашей настройке). Подписка в ngOnInit предназначена для того, чтобы заставить getUsers выполнить, что само по себе является одним из способов.

3. В onSubmit вместо вызова нового запроса GET вы должны использовать this.user = {...this.user, ...res } , где res — это ответ на ваш запрос POST.

Ответ №1:

Похоже, что после добавления пользователя вы не отправляете обновленный список пользователей дочернему компоненту. Вы можете создать @Input() свойство в дочернем компоненте и отправлять данные из родительского компонента:

дочерний элемент.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>

parent.ts:

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

  increment() {
    this.counter  ;
  }

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

Полный пример stackblitz можно увидеть здесь

Ответ №2:

Я бы попробовал что-то вроде этого:

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>

дочерний компонент.ts

 ...

users:User[]

constructor(private myUserService:myUserService){
  this.users = myUserService.getUsers()
}

...

пожалуйста, скажите мне, если это непонятно