角“未定义标识符'todos'。”

Question

what could be the cause of this error

"Identifier 'todos' is not defined. The component declaration, template variable declarations, element references do

I've been trying to run this in ionic4 linking it to firebase and this error is popping up on the various lines (12,36) and (9,41).

<ion-header>
          <ion-toolbar color="primary">
            <ion-title>
              Ionic FireStore
            </ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content>

          <ion-list>
            <ng-container *ngIf="!todos || todos.length == 0">
              <div *ngFor="let n of [0,1,2]" padding>
                <p>
                  <ion-skeleton-text class="fake-skeleton"></ion-skeleton-text>
                </p>
              </div>
            </ng-container>
          <ion-item-sliding *ngFor="let item of todos">
            <ion-item lines="inset" button[routeLink]=" ['/details, item.id'] ">
              <ion-label>
                {{item.task}
              <p>{{ item.createdAt | date:'short'}} </p>
              </ion-label>
              <ion-note slot="end" color="primary"> {{ item.priority }} </ion-note>

            </ion-item>
            <ion-item-options side="end">
              <ion-icon name="checkmark" slot="end"></ion-icon>
            </ion-item-options>
          </ion-item-sliding>
          </ion-list>

          <ion-fab vertical="bottom" horizontal="end" slot="fixed">
            <ion-fab-button routerLink="/details" routerDirection="forward">
              <ion-icon name="add"></ion-icon>
            </ion-fab-button>

          </ion-fab>

    </ion-content>

Answer 1

'todos' is not defined.

This is a Javascript error. It says you have not defined the variable todos .

You most likely have a component that contains the described HTML .

You could try the following...

...in component
todos;
constructor()...

or

...in component
todos = [];
constructor()...

On a side note...

Open your browser console and type: todos;

You get back: "Uncaught ReferenceError: todos is not defined"

Type: var todos;

You get back: "undefined"

See the difference? The "undefined" of the "defined" todos variable is referencing an undefined right-hand assignment; ie it has nothing defined attached to the defined todos . It's a bit confusing.

All variables must be defined before they are used. When you defined a variable in a javascript class we leave out the var/let and just declare it as in

class Todo {
  todos;

  constructor(){}
}

The todos variable is declared. The left hand assignment is todos, and the right hand side is default undefined since nothing was provided. undefined points to the righthand side, not to the lefthand side. We must always provide a lefthand side assignment before using any variable.

You are using "!todos || todos.length == 0"

!todos means that there is a defined variable todos that has a falsey righthand side assignment of either: false, 0, "", null, NaN, or undefined. Then you are using the BANG operator to flip the logic. In any case, you must defined the variable todos in the proper scope.

Answer 2

I think you answered yourself here:

<ng-container *ngIf="!todos || todos.length == 0">

That ng-container should not show if todos is undefined!

Now, outside that ng-container you have:

<ion-item-sliding *ngFor="let item of todos">

You should add the code from the ng-container here too, so you would have something like this:

<ng-container *ngIf="!todos || todos.length == 0">
   <ion-item-sliding *ngFor="let item of todos">
</ng-container>

Then, that ion-item-sliding wouldn't show either if todos is undefined!