Блог

Привет всем, я не могу в этом разобраться. Я добавляю элементы в свой массив, но мой dom не обновляется, пока я не обновлю страницу. Я использую trackBy в отдельном компоненте, и он отлично работает, но в этом более новом компоненте он вообще не работает.

Вот мой html

 <div class="accordion" id="accordionExample">
  <div class="card" *ngFor="let grocery of groceryList;trackBy:trackByIdCode; index as index;">
    <div class="card-header" [id]="'grocery1' index">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" [attr.data-target]="'#grocery2' index" aria-expanded="false" [aria-controls]="'grocery2' index">
          {{grocery.recipeName}}
        </button>
      </h5>
    </div>

    <div [id]="'grocery2'   index" class="collapse" [aria-labelledby]="'grocery1' index" data-parent="#accordionExample">
      <div class="card-body">
        <ul class="list-group" id="filterList">
          <li class="list-group-item">
            <a href="#" class="list-down-btn" data-toggle="#subgroup"><span class="glyphicon glyphicon-chevron-down"></span></a>
            <ul id="subgroup" class="list-group">
              <li class="list-group-item" *ngFor="let ingredient of grocery.ingredients">{{ingredient}}</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<mat-icon svgIcon="shopping_cart"></mat-icon>
  

Вот мой код компонента:

 import { Component, OnInit, NgModule,ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import {GetRecipesService} from '../getrecipes.service';
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";
@Component({
  selector: 'app-grocery-sidebar',
  templateUrl: './grocery-sidebar.component.html',
  styleUrls: ['./grocery-sidebar.component.css'],
  changeDetection: ChangeDetectionStrategy.Default,
  })
export class GrocerySidebarComponent implements OnInit {//

  constructor(getRecipesService: GetRecipesService,private matIconRegistry: MatIconRegistry,private domSanitizer: DomSanitizer,private cdr:ChangeDetectorRef) { 
    getRecipesService.getGroceryList().subscribe(promise=>{
      this.groceryList = promise.data;
  });
    this.recipeService=getRecipesService;
    this.matIconRegistry.addSvgIcon("shopping_cart",this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/shopping-cart-solid.svg"));
  }

  addToGroceryList(recipeName,recipeIngredients){
    this.recipeService.addToGroceryList(recipeName,recipeIngredients).subscribe(promise=>{
      console.log("addToGroeryList Promise: " promise);
      this.refreshGroceryList();
    });

  }

  refreshGroceryList(){
    this.recipeService.getGroceryList().subscribe(promise=>{
      console.log("refreshed groceryList: " promise.data)
      this.groceryList = promise.data;
      console.log(this.groceryList);
      this.cdr.markForCheck();
    })
  }

  deleteGroceryRecipeById(recipeId){
    this.recipeService.deleteGroceryRecipeById(recipeId).subscribe(promise=>{
      this.refreshGroceryList();
    });
  }


  public trackByIdCode(index: number, grocery: any): string {
    console.log("tracking");
    return grocery._id;
}

  ngOnInit(): void {
  }

  recipeService;
  groceryList: object[];
  showFiller=false;
}
  

И я не могу использовать changeDetection: ChangeDetectionStrategy.OnPush, потому что, когда я ничего не делаю, в моем dom ничего не отображается, и я не могу понять, почему, но когда я переключаюсь на changeDetection: ChangeDetectionStrategy.Данные по умолчанию отображаются снова, но по-прежнему не обновляются.

РЕДАКТИРОВАТЬ: я даже пробовал гораздо более простой html, и он по-прежнему не обновляется с изменениями. Вот мой простой html:

 <p *ngFor="let grocery of groceryList;trackBy:trackByCode;">{{grocery.recipeName}}</p>
  

Я действительно очень надеюсь, что кто-нибудь увидит, что здесь происходит, потому что я в полной растерянности. Я понятия не имею, что еще я могу сделать

это не обновляется из-за trackBy — я просто нажал на это. Я использую OnPush, и trackBy вызывал проблемы с кэшированием. Я не разгадал это полностью, но из-за trackby я не получал обновлений (в моем случае это было просто обновление attr одного сложного объекта в большой коллекции)

В вашей функции trackBy возвращает строковое представление обновленных значений и привязывает его либо к индексу, либо к чему-то еще уникальному.