* ngPour ne pas travailler en fléchette angulaire (4)

Question

J'ai créé un projet super basique en utilisant le dernier stagehand pour le vérifier.

Le pubspec ressemble à ceci:

name: angular4_basic 
description: A web app that uses AngularDart Components 
version: 0.0.1 
#homepage: https://www.example.com 
#author: Rick Berger <email@example.com> 

environment: 
    sdk: '>=1.24.0 <2.0.0' 

dependencies: 
    angular: ^4.0.0 
    angular_components: ^0.6.0 

dev_dependencies: 
    browser: ^0.10.0 
    dart_to_js_script_rewriter: ^1.0.1 

transformers: 
- angular: 
    entry_points: 
     - web/main.dart 
- dart_to_js_script_rewriter 

Voici main.dart:

import 'package:angular/angular.dart'; 

import 'package:angular4_basic/app_component.dart'; 

void main() { 
    bootstrap(AppComponent); 
} 

Le app_component.html ressemble à ceci:

<h1>The Beatles</h1> 

<ul> 
    <li *ngFor="let name of names">{{name}}</li> 
</ul> 

Et le app_component.dart ressemble à ceci:

import 'package:angular/angular.dart'; 
import 'package:angular_components/angular_components.dart'; 

@Component(
    selector: 'my-app', 
    styleUrls: const ['app_component.css'], 
    templateUrl: 'app_component.html', 
    directives: const [materialDirectives], 
    providers: const [materialProviders], 
) 
class AppComponent { 
    List<String> names = <String>['George', 'Paul', 'Ringo', 'John']; 
} 

Je reçois les erreurs suivantes:

*ngFor="let name of names" 
^^^^^^^^^^^^^^^^^^^^^^^^^^ 
line 4, column 3 of AppComponent: ParseErrorLevel.FATAL: Property binding ngForOf not used by any directive on an embedded template 
<li *ngFor="let name of names"> 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

... suivi d'une grande trace à long pile

choses que j'ai essayé

• Remplacement du '* ngFor' avec '< ng-template ngFor ....> </ng-template>' syntaxe - qui a créé un problème non résolu.

• Utilisation du compilateur dartdevc

Alors, qu'est-ce que je manque, ici?

Answer 1

Ajouter NgFor ou CORE_DIRECTIVES dans votre liste des directives à côté de materialDirectives

Answer 2

Vous êtes absent le mot-clé let qui signifie « laisser quelque chose name être donnée par la directive structurelle ngFor, et d'utiliser ces informations pour construire le modèle ci-dessous ».

Ce que ngFor vous donnera est des éléments de la matrice names.

Ceci est plus facile à voir dans la forme désucrée des directives structurelles.

<ng-template [ngForOf]="names" let-name> 
    {{ name }} 
</ng-template> 

Fondamentalement, un modèle est sorte de une fonction (ce n'est pas, mais un beau modèle mental), et name est un argument. Vous écrivez à quoi ressemblera le modèle en fonction de l'argument, et ngFor les arguments fournis pour vous.

Ce « argument » est appelé contexte, et le fait que vous ne spécifiez pas le nom du contexte signifie que vous avez utilisé un implicite un. ngFor vous propose également d'autres "arguments" (autres valeurs du contexte), tels que index ou first.

<ng-template [ngForOf]="names" let-name let-i="index"> 
    {{ i }}. {{ name }} 
</ng-template> 

Ici, nous avons pris un contexte nommé index et lui a attribué une i variable. Ensuite, nous utilisons i à l'intérieur du modèle. Ceci est similaire à avoir une fonction avec le nom de l'argument i, puis en l'appelant avec une variable nommée index.Voici une version super simplifiée de ce qui se passe derrière le capot.

function render(i) { return i } 
for (let index = 0; index < 3; index++) { 
    render(index) 
}