时间戳

首页 > 解决方案 > 如果我在另一个组件中显示，Angular 组件不会更新

angular - 如果我在另一个组件中显示，Angular 组件不会更新

问题描述

我有简单的 2 个组件

med-create.html

<mat-card>
  <form (submit)="onAddPost(postForm)" #postForm="ngForm">
    <mat-form-field class="example-full-width">
      <input matInput type="text" ngModel name="name" #name="ngModel" required placeholder="Medicine Name">
      <mat-error *ngIf="name.invalid">Please enter a medicine name </mat-error>
    </mat-form-field>
    <br>
    <mat-form-field class="example-full-width">
      <input matInput type="text" ngModel name="company" #company="ngModel" required placeholder="Medicine company">
      <mat-error *ngIf="company.invalid">Please enter a medicine company </mat-error>

    </mat-form-field>
    <br>
    <mat-form-field class="example-full-width">
      <input matInput type="text" ngModel name="type" #type="ngModel" required placeholder="Medicine type">
      <mat-error *ngIf="type.invalid">Please enter a medicine type </mat-error>

    </mat-form-field> <br>
    <mat-form-field class="example-full-width">
      <input matInput type="text" ngModel name="quantity" #quantity="ngModel" required placeholder="Medicine quantity">
      <mat-error *ngIf="quantity.invalid">Please enter a medicine quantity </mat-error>

    </mat-form-field>
    <br>
    <button mat-raised-button type="submit" color="accent">Save</button>
  </form>
</mat-card>


<app-med-list [records]="storedRecord"></app-med-list>

med-create.ts

export class MedCreateComponent implements OnInit {
  enteredContent = '';
  enteredTitle = '';
  @Output() recordCreated = new EventEmitter<MED>();

  storedRecord: MED[] = [];

  onPostAdded(rec){
    this.storedRecord.push(rec);
  }

  constructor() { }

  ngOnInit(): void {
  }

  onAddPost(form: NgForm){
    if(form.invalid){
      return;
    }

     const rec: MED = {name: form.value.name, company: form.value.company, type: form.value.type, quantity: form.value.quantity}
     console.log(rec);
     this.recordCreated.emit(rec);
     form.resetForm();

  }
}

med-list.html

<table *ngIf="records.length > 0" id="users">
  <tr>
    <th>Name</th>
    <th>Company</th>
    <th>Type</th>
    <th>Quantity</th>
  </tr>

  <tr *ngFor="let p of records">
    <td>{{p.name}}</td>
    <td>{{p.company}}</td>
    <td>{{p.type}}</td>
    <td>{{p.quantity}}</td>

  </tr>
</table>

<p *ngIf="records.length == 0" class="info-text mat-body-1">No Records added yet</p>

医学列表.ts

export class MedListComponent implements OnInit {
  displayedColumns: string[] = ['name', 'company', 'type', 'quantity'];

  @Input() records: MED[] = [];

  constructor() { 
    
  }

  ngOnInit(): void {
    console.log(this.records);
  }

}

在 med-create 我有一个简单的表单并在 html 中显示我的第二个组件。我只需要通过@input 和@output 装饰器传递数据。首先，我尝试在 app.component.html 中做同样的事情，它工作得非常好，但是当我在我的 med-create 组件中显示我的 med-list 组件时，它没有更新。一直以来

显示未找到记录的文本。如果我将此组件移动到 app.component.html 它工作正常。我需要知道我做错了什么，为什么它不能在组件中工作？

标签： angulartypescript

解决方案

我认为您没有以任何方式使用输出事件。使用输出事件的主要原因是子组件之间的通信 => 父组件而不是父组件 => 子组件。因此，基于您的场景中的这一点，您必须修改您的代码，如下所示。
med-create.ts [父组件]

export class MedCreateComponent implements OnInit {
  enteredContent = '';
  enteredTitle = '';
  @Output() recordCreated = new EventEmitter<MED>();

  storedRecord: MED[] = [];


  constructor() { }

  ngOnInit(): void {
  }

  onAddPost(form: NgForm){
    if(form.invalid){
      return;
    }

     const rec: MED = {name: form.value.name, company: form.value.company, type: form.value.type, quantity: form.value.quantity}
     console.log(rec);
     this.storedRecord.push(rec); // Push record in your array here which is passed to child component via input attribute
     this.recordCreated.emit(rec);
     form.resetForm();

  }
}

推荐阅读