通過@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

如果您要在多個組件之間共享相同的數據，我認為使用共享服務會更有效。 您可以在此處找到一些示例代碼片段。