通过@Input() 传递的数据

Question

我有一个关于使用@Input() 将数据传递给组件的问题。当我有一个包含一些数据的list 组件时。当我单击edit 和view 按钮时，它会加载一些组件。在我的detailComponent:

@Input() serviceTimeGoal: IServiceTimeGoal;

我的更新组件与细节相同。但细节组件工作正常。但是更新组件没有收到数据。这是我正在打开的模式：

 <table
        class="table table-striped table-bordered table=hover"
        aria-describedby="page-heading"
      >
        <thead>
          <tr>
            <th scope="col"><span>Үүсгэсэн огноо</span></th>
            <th scope="col"><span>Үүсгэсэн хэрэглэгч</span></th>
            <th scope="col"><span>Шинэчилсэн огноо</span></th>
            <th scope="col"><span>Шинэчилсэн хэрэглэгч</span></th>
            <th scope="col"><span>Идэвхитэй</span></th>
            <th scope="col"><span>Хугацаа</span></th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let serviceTimeGoal of serviceTimeGoals; let i = index">
            <td>{{ serviceTimeGoal.createdAt | dateFormatPipe }}</td>
            <td>{{ serviceTimeGoal.createdBy }}</td>
            <td>{{ serviceTimeGoal.updatedAt | dateFormatPipe }}</td>
            <td>{{ serviceTimeGoal.updatedBy }}</td>
            <td>{{ serviceTimeGoal.enabled }}</td>
            <td>{{ serviceTimeGoal.time }}</td>
            <td class="text-right">
              <div class="btn-group">
                <button
                  type="submit"
                  (click)="
                    openModal(serviceTimeGoal, 'service-time-goal', $event)
                  "
                  class="btn btn-info btn-sm"
                >
                  <i class="icon-eye"></i>
                </button>
                <button
                  type="submit"
                  class="btn btn-primary btn-sm"
                  (click)="
                    openModal(serviceTimeGoal, 'update-service-time', $event)
                  "
                >
                  <i class="icon-pencil"></i>
                </button>
                <button
                  type="submit"
                  [routerLink]="[
                    '/service-time-goal',
                    {
                      outlets: {
                        popup: serviceTimeGoal.id.branchId + '/delete'
                      }
                    }
                  ]"
                  replaceUrl="true"
                  queryParamsHandling="merge"
                  class="btn btn-danger btn-sm"
                >
                  <i class="icon-bin"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
 </table>

<!-- Update component -->
<qms-modal id="update-service-time">
  <qms-service-time-goal-update
    [serviceTimeGoal]="serviceTimeGoal"
  ></qms-service-time-goal-update>
</qms-modal>

<!-- Detail component -->
<qms-modal id="service-time-goal">
  <qms-service-time-goal-detail
    [serviceTimeGoal]="serviceTimeGoal"
  ></qms-service-time-goal-detail>
</qms-modal>

在我的ts 文件中：

openModal(serviceTimeGoal: IServiceTimeGoal, id: string, e: any) {
    this.singleData = serviceTimeGoal;
    this.modalService.open(id);
    e.stopPropagation();
}

我在做什么错任何建议？

编辑：

更新组件：

@Input() serviceTimeGoal: IServiceTimeGoal;

ngOnInit() {
    this.isSaving = false;
    this.updateForm(this.serviceTimeGoal);
}

    updateForm(serviceTimeGoal: IServiceTimeGoal) {
    console.log(serviceTimeGoal);
    this.editForm.patchValue({
      cat: serviceTimeGoal.id.cat,
      reg: serviceTimeGoal.id.reg,
      loc: serviceTimeGoal.id.loc,
      name: serviceTimeGoal.id.name,
      tx1: serviceTimeGoal.id.tx1,
      tx2: serviceTimeGoal.id.tx2,
      tx3: serviceTimeGoal.id.tx3,
      tx4: serviceTimeGoal.id.tx4,
      createdBy: serviceTimeGoal.createdBy,
      updatedBy: serviceTimeGoal.updatedBy,
      enabled: serviceTimeGoal.enabled,
      time: serviceTimeGoal.time
    });
  }

细节组件：

@Input() serviceTimeGoal: IServiceTimeGoal;

更新：

详情：

Answer 1

如果您要在多个组件之间共享相同的数据，我认为使用共享服务会更有效。您可以找到一些示例代码 sn-ps here。