Как общаться между компонентами с темой, если элемент является массивом - PullRequest
Новая
       4

Как общаться между компонентами с темой, если элемент является массивом

0 голосов
/ 17 апреля 2020

У меня есть приложение angular 8 и функция обновления. Под функцией обновления у вас есть все элементы (список). Таким образом, вы можете обновить любой элемент. Но элемент обновления находится в другом компоненте, чем элементы. Но теперь, если вы обновите элемент, заголовок элемента в списке не будет обновлен. Только после ссылки на страницу sh.

Так что я сошел с ума по сервису по теме: 

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

  constructor() {}

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

Так что это функция, где вы обновляете элемент:

item .component 

  <span>{{ item.title}}</span>


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

item.ts 


  item: DossierItemDto;

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

, и это представление со всеми элементами (список): view.component: 

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

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

и view.ts: 

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

Но когда я смотрю данные, я вижу обновленное значение. так что это правильно. Но когда я нахожусь над заголовком, я ничего не вижу.

И когда я наводю курсор мыши на this.dossierItems, я, конечно, вижу все элементы. Потому что это массив. Но как получить теперь правильный item.title?

Что я должен изменить?

Поскольку у каждого элемента есть определенный c тип, например: цель, примечание, Интервью: 

export type DossierItemTypeDto = 'Interview' | 'Note' | 'Goal' | 'ActionStep';

export const DossierItemTypeDto = {
  Interview: 'Interview' as DossierItemTypeDto,
  Note: 'Note' as DossierItemTypeDto,
  Goal: 'Goal' as DossierItemTypeDto,
  ActionStep: 'ActionStep' as DossierItemTypeDto
};

это функция : dossierItemsBy: 

 dossierItemsBy(itemType: DossierItemTypeDto) {

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

1 Ответ

0 голосов
/ 17 апреля 2020

Это решение: 

this.itemlistService._updateItemChanged.subscribe(data => {
     const index = this.dossierItems.findIndex(a => a.id === data.id);
     this.dossierItems[index] = data;
     this.dossierItems = JSON.parse(JSON.stringify(this.dossierItems));
...