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

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

(Я пробовал с trackBy, async, changeDetection, Observables, Promises добавить логику в блок OnInit)

оба компонента являются частью модуля AdmisionesModule

@NgModule({
  declarations: [    
    newComponent,
    oldComponent,
    ...
  ],
  imports: [
    AdmisionesRoutingModule
    ...
  ],

это AdmisionesRoutingModule

const routes: Routes = [
  { path: '', component: containBothComponent },
  { path: 'comprobantePago/:referencia', component: containBothComponent },
  { path: 'error/:codigo', component: containBothComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class AdmisionesRoutingModule {}

затем AdmisionesModule вызывают в моем app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/usuario/iniciar-sesion', pathMatch: 'full' },
  { path: 'usuario', loadChildren: () => import('@login/login.module').then(mod => mod.LoginModule) },
  { path: 'admisiones',canActivate: [SecurityGuard], loadChildren: () => import('@admisiones/admisiones.module').then(mod => mod.AdmisionesModule)},
];

код ngFor максимально прост

newComponent.ts/newComponent.ts

options: any[];

constructor(public myServices: MyService) {
this.myServices.askService().subscribe({
      next(values: any[]) {
        this.options = values;
      },
      error(err) {
        console.error(err);
      },
    });
}

newComponent.html/newComponent.html

<p *ngFor = "let option of options">{{option.economic_sector_desc}}</p>

Информация о проекте и окружающей среде:
Angular CLI: 16.1.8
Node: 18.15.0
Package Manager: npm 9.7.2
Angular: 16.2.7
@angular-devkit/architect 0.1602.4
@angular-devkit/build-angular 16.2.4
@angular-devkit/core 16.2.4
@angular-devkit/schematics 16.1.8
@angular/cdk 16.2.6
@angular/cli 16.1.8
@angular/material 16.2.6
@schematics/angular 16.1.8
rxjs 7.8.1
typescript 5.1.6
zone.js 0.13.3

если я что-то упускаю, пожалуйста, дайте мне знать.

(Я пробовал с trackBy, async, changeDetection, Observables, Promises добавить логику в блок OnInit)

Кроме того, тестирование кода на различных компонентах исходных компонентов, поставляемых с проектом, работает правильно, а тот, который я добавил, не работает.

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

Вы импортировали CommonModule в модуль вашего нового компонента?

Caio Oliveira 04.06.2024 20:55

Да, оба компонента вызываются в AdmisionesModule, и в разделе импорта у меня есть как CommonModule, так и AdmisionesRoutingModule. Вот так: imports: [ CommonModule, AdmisionesRoutingModule, ...

FelipeV 04.06.2024 22:08
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Есть ли у вас CommonModule в вашем импорте - это может быть связано с этим.

дополнительную информацию можно найти в документации [ngFor][1]

Вы можете использовать asyncPipe для наилучшего подхода к рендерингу или данным.

объявить наблюдаемым в вашем компоненте

public options$:Observable<any[]> = this.myServices.askService();

измените свой шаблон следующим образом

<ng-container *ngIf = "option$ | async as optionsList">
  <div *ngFor = "let option of optionsList">
    {{ option }}
  </div>
</ng-container 

Спасибо! [1]: https://v16.angular.io/api/common/NgFor

Большое спасибо, это сработало, но я не понимаю, единственная разница, которую я вижу в том, что я пробовал, - это обернуть ngIf асинхронным каналом, который я ранее пробовал, но с асинхронностью только на ngFor и ngIf, но они так и не получили уведомление о получении данных

FelipeV 05.06.2024 16:09

Другие вопросы по теме