通过@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();
}

任何建议我在做错什么？

编辑：

updateComponent：

@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
    });
  }

detailComponent：

@Input() serviceTimeGoal: IServiceTimeGoal;

更新：

详细信息：

Answer 1

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