An unexpected loop is generated by Angular2's ngFor

Attempting to implement ngFor in Angular 2 rc-1, here is an example:

@Component({
    selector: 'myList',
    template: `<h2>Menu</h2>
                {{title}}
                <ul>
                    <li *ngFor="let menu of menus">
                        {{menu }}
                    <li>
                </ul>`
})
export class MenuComponent {
    title:string = "Our lunch menu";
    menus= ["Menu 1", "Menu 2", "Menu 3"];
}

The issue I'm encountering is that instead of generating 3 bullet points/lists, it ends up with 4 bullets, the last one being empty.

Does anyone have any insights into why this might be happening or if I made a mistake?

Appreciate any help!

Answer №1

There are a couple of errors in your code

1. You forgot to import CORE_DIRECTIVES into your component As mentioned by @Gunter in the comments, there is no need to import CORE_DIRECTIVES as they come included with PLATFORM_DIRECTIVES by default

  1. Why is your code producing 3 list items when it should end up with 4, with the last item having no text? This is because you have not included an closing tag for </li> in your code. To fix this, update your code to:

    <ul>
      <li *ngFor="#menu of menus; #i=index">
       {{menu}} {{i}} {{menus.length}}
      </li>
    </ul>
    

Here is a working example: Working example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting a child process created by electron in Visual Studio Code

I am currently in the process of developing an electron application using typescript and webpack. I have encountered a specific debugging issue with vscode that I would like some assistance with: Context: The main process initiates a child process by call ...

Guide on altering the bar colors based on their values with the help of the ApexCharts library and the Angular framework

I'm facing an issue with a component that displays a graph with 2 series: Indicators and Bonus. The rule I set is that when the value ranges from 0 to 99, the bar turns red. If it's greater than 99, the bar should be green. This works fine for t ...

Extend an array by Parsing JSON

I'm struggling to retrieve the JSON string from localStorage and add a new dish to it. It's not functioning correctly, can anyone lend me a hand? I am utilizing TypeScript. interface Dish { id: number; name: string; desc: string; ...

Disable JavaScript import optimization for a specific file in IntelliJIDEA

I recently came across a tutorial on Angular 2 Google maps that I was following: The tutorial included the following import statement: import { } from 'googlemaps'; However, I encountered a problem where IntelliJ recognized this as an empty im ...

Tips for effectively sending prop to a component in React with the help of TypeScript

Hey there, I'm working on a component called FormField which can accept either an icon for create or edit. Currently, I am using this FormField inside another component called SelectWithFormField. Here's how it looks: const FormField = ({create, ...

TextAngular failing to replace &nbsp character

I am currently using textAngular within a div that has a character counter feature. However, I have encountered an issue where a space ( ) is being counted as 6 characters instead of just one. Despite trying various regex patterns to convert this spec ...

Angular Dynamic Table Column Adaptor

Recently, I came across the adpt-strap table lite and decided to experiment with it. Here is the JSfiddle link for the project I was working on: http://jsfiddle.net/cx5gm0sa/ My main goal was to dynamically hide or show a column. In my code, I added $scop ...

Provide a definition for a conditional within the confines of a ternary operator

One of my goals is to alter the colors of my cell within a table by using the following code in my td data-ng-class="{selected.id == price.id && !price.isMinPrice ? 'selected' : '', selected.id == price.id && price.isMi ...

Communicating between Angular components

I'm encountering difficulties in establishing communication between two components within Angular. Despite my efforts, I can't pinpoint where I am going wrong. Specifically, I have a table component and I aim to open a modal window (which is a s ...

What would be the most efficient method in Angular for saving and retrieving information on whether a user has previously selected a checkbox?

I am currently in the process of learning angular as I develop a web application that resembles a todo list, specifically focused on football teams. In this application, users can navigate through a menu to select a league from four options. The applicatio ...

Choosing an option beforehand using angular-ui-select2 version 0.0.5

I'm struggling with setting a default option in a select2 dropdown using Angular and an ng-model. Here's my implementation: Angular controller code snippet $scope.filter = { searchValue: '', departmentId: 'Department2' } ...

Tips on retaining the value of $index in ng-repeat and storing it within the array

I currently have a cart for shopping. The code for the "add to cart" function looks something like this (shortened): "add" : function(code) { codes.push({ "id" : code.id, "order" : "N/A", ...

Presentation comparing ng-show and ng-hide efficiency

Introduction:- There may be some who opt to use ng-show instead of ng-hide="!true", while others choose ng-hide over ng-show="!true". Technically, the ng-hide directive is not necessary. However, Angular introduced it for a standard coding structure. Plea ...

If the outer observable encounters an error, make sure to forcefully call the inner observable within the switchMap

Here is my code: return this.userService.getPosition().pipe( switchMap(() => { return this.get('/places', { point: this.userService.coords }); }), ); Sometimes, the position cannot be retrieved, for example if the ...

Oops! Looks like there's an issue with the type error: value.forEach is

I am working on creating an update form in Angular 6 using FormArray. Below is the code snippet I have in editfrom.TS : // Initialising FormArray valueIngrident = new FormArray([]); constructor(private brandService: BrandService, private PValueInfoSe ...

Tips for triggering the update of index.view when the Save command is triggered within an active dialog

When I try to save in an open dialog using the Save command, the parent index.view does not update. However, everything works fine when using the SaveAndClose command. This was tested on the Product object at https://github.com/alex-kukhtin/A2v10.Web.Sampl ...

The ajv-based middy validator does not adhere to the specified date and time format

When it comes to validation, I rely on middy as my go-to package, which is powered by ajv. Below is an example of how I set up the JSON schema: serviceDate: { type: 'string', format: 'date-time' }, The structure o ...

Can two Angular applications be run simultaneously, where one is version 1.6.4 and the other is version 6.1?

Is it feasible to have two separate Angular applications running simultaneously, one with version 1.6.4 and another with version 6.1? My global Angular version is 6.1 as well. I'm curious to know if this setup is achievable and if so, can someone prov ...

Tabulator: Adding a new row with merged columns in Tabulator

Is there a method to insert a new row in Tabulator that spans multiple columns? view image here I am looking for something similar to this, where data is displayed across more than one column. I need to incorporate additional details retrieved from an aj ...

Setting a custom port for your Node.js Typescript project on Heroku

In the usual case, Heroku dynamically assigns a port for us. const PORT : string|number = process.env.PORT || 5000; However, how can I alter this code to handle the PORT... utilizing the => TypeScript shorthand? server.listen(port => { console.l ...