添加新值后我无法更新 table

Question

我是 angular 的新手，我正在尝试插入新值并将它们显示在 table 中。因此，我有三个组件，一个用于列出用户的信息 user-list，一个用于创建信息原始文件 user-form，一个用于呈现这些信息 single-user.

我的问题是，当我尝试插入新的原始信息时，table 列表不会自行更新或刷新，即使我重定向到它，我也不知道为什么. 可能有人给我任何指示。提前致谢。

用户-list.component.ts:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from '../services/user.service';
import { Subscription, Observable } from 'rxjs';
import { User} from '../model/user.model';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit, OnDestroy {

  constructor(private router: Router, private userService : UserService ) { }

  userSubscription: Subscription;
  users: Observable<User[]>;

  ngOnInit() {
    this.reloadData();
  }

  reloadData(){
   this.userSubscription = this.userService.getResource("/users").subscribe(
      data =>{
        this.users= data;
        console.log(this.users);
      },
      error => { console.log(error);
      }
   ); 
  }

  ngOnDestroy() { this.userSubscription.unsubscribe(); }

}

用户-list.component.html:

<div id="page-wrapper">
  <div class="main-page">
    <div class="tables">
        <app-user-form></app-user-form>
        <div class="table-responsive bs-example widget-shadow" data-example- 
           id="contextual-table"> 
             <table class="table table-hover "> 
          <thead> 
                <tr> 
                    <th>#</th> 
                    <th>Name</th>
                    <th>Age</th>
                    <th>Action</th> 
                </tr> 
           </thead>
              <tbody class="body">
              <ng-container *ngFor="let u of users"> 
                  <tr class="active" 
                    app-single-user
                    [IdUser] =  "u.idUser"
                    [NameUser] = "u.nameUser"
                    [AgeUser] = "u.ageUser"
                  > 
                  </tr>
            </ng-container>
          </tbody> 
        </table> 
        </div>
    </div>
  </div>
</div>

用户表单-component.ts

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {

  userForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
              private router: Router, 
              private userService: UserService
              ) { }

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.userForm = this.formBuilder.group({
      nameUser: ['', Validators.required],
      ageUser: ['', Validators.required]
    });
  }

  reInitForm() {
    this.userForm = this.formBuilder.group({
      nameUser: '',
      ageUser: ''
    });
  }

  onSubmit(){
    const formValue = this.userForm.value;
    const newuser = new User(
      formValue['nameUser'],
      formValue['ageUser']
    );
    this.userService.postResource('/users', newUser).subscribe(
      data =>{
        console.log(data)
      },
      error=>{
        console.log(error)
      } 
    );
    this.reInitForm();
    this.router.navigate(['/users']);
  }

}

用户表单-component.html:

<div class="table-responsive bs-example widget-shadow" data-example-id="contextual-table">

    <div class="main-page">
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="form-inline">
        <div class="form-group">

            &nbsp;
            <input type="text" class="form-control" id="name"
                   formControlName="nameUser" name="name" required>

          <input type="text" class="form-control" id="age" 
                   formControlName="ageUser" name="age" required>

        </div>
        &nbsp; &nbsp;

        <button type="submit" class="btn btn-success"
            [disabled]="userForm.invalid">Submit</button>
    </form>
    </div>

</div>

我尝试重定向到同一组件 this.router.navigate(['/users']); 以便刷新 table 的内容，但它不起作用。如果有人能给我一些提示或指示来解决它，我将不胜感激。谢谢

Answer 1

如评论中所述，users 应该是 User[] 类型，因为您正在为其分配订阅值并且导航到同一组件不会导致组件重新呈现。

相反，您可以使用 @Output 来实现此目的。添加 newUser 后，您将刷新父组件 (user-list.component.ts) 中的数据。

用户表单-component.ts

@Output() submitted = new EventEmitter<void>();

然后在 POST API 成功时发出事件

this.userService.postResource('/users', newUser).subscribe(
    data => {
        console.log(data);
        this.submitted.emit();
    },
    error => {
        console.log(error);
    } 
);

在您的父组件模板中，您需要将此事件添加到您的自定义组件中。

用户-list.component.html

<app-user-form (submitted)="onSubmit($event)"></app-user-form>

然后在你的父组件中。

用户-list.component.html

onSubmit() {
    this.reloadData();
}

有关如何使用 @Output 的详细信息，请参阅 docs。

添加新值后我无法更新 table

I can't update the table after adding new values

html

angular

typescript

angular-ui-router