Я работаю над уже запущенным проектом, и при использовании директивы 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 получает новый набор данных, и я хочу знать, почему он не работает, чтобы избежать проблем в будущем.
Да, оба компонента вызываются в AdmisionesModule, и в разделе импорта у меня есть как CommonModule, так и AdmisionesRoutingModule. Вот так: imports: [ CommonModule, AdmisionesRoutingModule, ...
Есть ли у вас 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, но они так и не получили уведомление о получении данных
Вы импортировали CommonModule в модуль вашего нового компонента?