I encountered an issue while attempting to utilize the *ngFor directive in my code. Upon running the application, I'm receiving an error message that is puzzling me.
I have meticulously verified that all property names are correctly set and there are no directives involved in this scenario. The app was configured following the instructions provided on angular.io's quickstart guide.
This is the content of my tsconfig:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
The contents of my package.json are as follows:
{
"name": "angular-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
// Remaining package.json content has been omitted for brevity...
Below is the systemjs.config file:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
// mappings go here...
},
packages: {
// packaging details here...
}
});
})(this);
Here is the section of the code where I am utilizing ngFor:
// TypeScript code snippet showcasing ngFor usage
import {Component} from "@angular/core";
@Component({
selector: 'semester-component',
template: `
<div class="semester-div">
<ul>
<li *ngFor="let subject of subjectsNames">
<span>
<input #subjectName type="text" />
<input id = "subjectGrade" type = "number"/>
<input id = "subjectWeight" type = "number"/>
</span>
</li>
</ul>
<br>
<button (click)="addSubject(subjectName.value)">add</button>
<br>
</div>
`,
})
export class semesterComponent {
subjectsNames = ["math"];
addSubject(subjectName: string) {
if (subjectName) {
this.subjectsNames.push(subjectName);
this.subjectsNames.slice();
console.log(subjectName);
console.log(this.subjectsNames);
}
};
Lastly, here is my module file:
// Module file detailing the setup
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {AppComponent} from "./app.component";
import {semesterModule} from './semester/semester.module';
@NgModule({
imports: [ BrowserModule, semesterModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }