简体   繁体   中英

Angular 5: not rendering using ngFor the properties

I am having problems with *ngFor . I get the length ok but data is not rendering.

I am using Angular 5 and Typescript.

My component is:

@Component({
  selector: 'app-reglada',
  templateUrl: './reglada.component.html',
  styleUrls: ['./reglada.component.css'],
  providers: [DataService]

})
export class RegladaComponent implements OnInit {
  public reglada: Reglada[] = new Array<Reglada>();
  public console = console;

  constructor(public data: DataService, globals: Globals)
  {
      data.cargarDades(new Reglada()).then(
          res => { // Success
            var items = JSON.parse(JSON.stringify(res));

            for (var i = 0; i < items.length; i++)  {
              var obj = Object.assign({}, items[i]); //copy data from webapi... result is ok

              this.reglada.push(obj); // push in the public variable. obj data is working ok.
            }
          }
      );
  }

  ngOnInit() {
  }
}

My poco is:

export class Reglada extends Base {
    public Cultura: string;
    public Any: number;
    public Descripcio: string;
    public Academia: string;
}

And my html is:

--{{reglada.length}}-- HERE I AM GETTING  rows and it is ok
<P *ngFor="let item of reglada"> <!-- HERE MAKES THE LOOP but item.Any is not displayed. -->
    <label class="negreta">{{item.Any}}.</label> {{item.Descripcio}}. {{item.Academia}}.
</P>

My module is:

const routes: Routes = [{
  path: '',
  data: {
    title: 'Curriculum Vitae',
    urls: [{ title: 'Detall', url: '/cv' }, { title: 'CV' }]
  },
  component: CVComponent
}];

@NgModule({
  imports: [
    FormsModule,
    CommonModule,
    HttpClientModule,    
    RouterModule.forChild(routes),
    TagsInputModule.forRoot()
  ],
  declarations: [
    CVComponent,
    ClientComponent,
    CapcaleraComponent,
    EducacioComponent,
    ExperienciaLaboralComponent,
    RegladaComponent,
    NoRegladaComponent,
    IdiomesComponent,
    EducacioComponent,
    ConeixementsComponent    
  ]
})
export class CVModule { }

What is happening? Is it something particular of Angular 5?

JB Nizet:

item.Any must be an empty string, or null, or undefined. 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM