Question

我有一个角度应用程序，并且我有两个部分。仅在其中可以更新项目。另一种是在触发按钮更新时必须直接显示更新值。

所以我做了这样的服务：

export class ItemListService {
  _updateItemChanged = new Subject<string>();

  constructor() {}

  get refreshNeeded() {
    return this._updateItemChanged.next();
  }
}

以及该值来自的值：

[appSubmitIfValid]="editItemForm" (valid)="save()" i18n>Update</button>
        <button *ngIf="!isNew" mat-raised-button color="warn" (click)="openRemoveDialog()" i18n>Remove</button>

 save(): void {
    const form = this.editItemForm;
    const dossierItemDto: DossierItemPostDto = {
      title: form.controls.title.value,
      itemType: form.controls.itemType.value,
      date: (form.controls.date.value as moment.Moment).format('Y-MM-DD'),
      body: form.controls.body.value
    };

    form.disable();

    if (!this.isNew) {

      this.dossierItemService.updateDossierItemById(this.dossier.id, this.item.id, dossierItemDto)

        .subscribe(item => {
          this.item = item;
          this.sortDossierItems();
          form.enable();
          form.markAsPristine();
          this.itemListService._updateItemChanged.next(this.item.title);
          this.errorProcessor.openSuccessSnackBar($localize`Item is saved`);
        }, error => this.handleError(error));
    } else {
      this.dossierItemService.newDossierItem(this.dossier.id, dossierItemDto)
        .subscribe(item => {
          this.item = item;
          this.dossierItems.unshift(item);
          this.sortDossierItems();
          this.isNew = false;
          form.enable();
          form.markAsPristine();
          this.errorProcessor.openSuccessSnackBar($localize`Item is saved`);
        }, error => this.handleError(error));
    }
  }

和必须更新的组件（父）：


  dossierItems: DossierItemDto[] = [];

ngOnInit(): void {
     this.itemlistService._updateItemChanged.subscribe((data) => {
     data =   this.dossierItems.map(a => a.title) ;
    });

但是我现在得到这个错误：


Type 'string[]' is not assignable to type 'string'.ts(2322)

那我要改变什么？

谢谢

oke，此值必须更新：item.title。

<ng-template #itemList let-itemType="itemType">
  <mat-card *ngFor="let item of dossierItemsBy(itemType); let i = index" class="dossier-item-view">
    <mat-card-header>
      <mat-card-title>
        <span [innerHTML]="item.title | highlight: searchQuery"></span>
        <span class="spacer"></span>
        <span><app-attachment-links [attachments]="item.attachments" [dossierId]="dossier.id" ></app-attachment-links></span>
      </mat-card-title>

      <div class="mat-card-header-text">
        <span *ngIf="!createdAtEqualsDate(item)"
          >{{ item.date | date: 'shortDate' }}<ng-template i18n>created</ng-template></span
        >
        <span>{{ item.createdAt | date: 'short' }}</span>
        <span *ngIf="item.createdAt !== item.lastModifiedAt"
          ><ng-template i18n>modified</ng-template> {{ item.lastModifiedAt | date: 'short' }}</span
        >
      </div>
      <span>
        <a mat-icon-button [routerLink]="['../', dossier.id, 'item', item.id]" routerLinkActive="active-link"
        [routerLinkActiveOptions]="{exact:true}"
         i18n-title title="Edit">
          <mat-icon>edit</mat-icon>
        </a>
      </span>
    </mat-card-header>
  </mat-card>
</ng-template>

  dossierItemsBy(itemType: DossierItemTypeDto) {
    return this.dossierItems.filter(
      i => i.itemType === itemType && (!this.hasSearchQuery || this.itemSearchMatches[i.id].hasMatch)
    );
  }

Answer 1

您是在 subject 中写的，并通过 string

_updateItemChanged = new Subject<string>();

然后在 subscribe 中尝试为它分配一个字符串数组

this.itemlistService._updateItemChanged.subscribe((data) => {
 data =   this.dossierItems.map(a => a.title) ;
});

如果您要更新您的父级，为什么不使用Output？

将值从子级更新为子级卡中的父级组件

1 个答案: