javascript - 通过@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

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