6
votes

Générer des composants enfants en angular2 avec NGUR ne fonctionne pas

J'utilise angular2 alpha 37.

J'ai défini un code> composant et un code> composant (enfant de code>). Le composant code> est un élément de données de tableau contenant une liste de coordonnées de marqueur. La vue code> doit afficher tous les marqueurs du tableau p>

Lorsque vous définissez le code> Voir comme suit (énumérer explicitement des composants pour tous les membres de la matrice ): P>

@View({
  template: '<marker *ng-for="#m of markers" [model]="m"></marker>',
  directives:[Marker,NgFor]
})


1 commentaires

Quelques informations supplémentaires: lorsqu'un composant est créé, il crée en fait un marqueur sur une carte de la feuille. Lorsque le composant est mis à jour, le marqueur sur la carte doit mettre à jour


3 Réponses :


0
votes

Essayez ceci xxx


1 commentaires

Merci pour votre contribution, mais cela donne les mêmes résultats. Sur chaque changement de #m , un nouveau marqueur est créé, au lieu de mises à jour.



3
votes

diviser la liste ngfor code> iTère sur les données de modèle.

Ceci est le code dard mais ne devrait pas être difficile à traduire en TS P>

// Marker model
class Marker {
  String name;
  int position;

  Marker(this.name, this.position);

  @override
  String toString() => 'Marker: $name - $position';
}


4 commentaires

Cela fonctionne en effet comme prévu. C'est une honte cependant que cette utilisation explicite d'indices est requise pour ce cas d'utilisation. Je vérifierai également l'autre réponse avant d'accorder une récompense finale


En outre, je m'attendrais à ce que ce qui suit fonctionne également, mais ce n'est pas le cas:


Et comment cette échelle est-elle lorsque le tableau Marqueurs change de manière dynamique la longueur? Le MarkersIndexes correspondant devrait être recalculé à tout moment?


Vous pouvez simplement ajouter Supprimer à la fin de la matrice MarkersIndexes . Tous les éléments (après la position INSERT / Supprimer) obtiendront des valeurs à partir d'une position différente de marqueurs attribuée à. Je suppose qu'il y a beaucoup de stratégies pour faire face à cela, mais il n'y a pas assez de détails sur votre cas d'utilisation réelle et aurait probablement besoin d'une vaste analyse comparative. Vous pouvez également créer votre directive ngfor NGFOR avec un comportement différent si vous voulez plus de contrôle.



0
votes

J'ai vu que vous utilisez la version alpha37 code> qui reste une version alpha et vous pouvez avoir des bugs ... j'ai fait des tests à l'aide de la version beta0 code> et il semble que travailler comme prévu. Je vous recommanderais donc de passer à cette version ... Nous nous attendons à ce que les versions bêta soient plus stables; -)

Voici le code que j'ai utilisé pour faire mon test: p>

  • composant principal p>

    update() {
      this.markers[1]= new Marker('m1a', 1);
    }
    
  • marqueur code> objet de données p>

    @Component({
      selector: 'map',
      template:`
        <marker *ngFor="#m of markers" [model]="m"></marker>
        <button (click)="update()">Update</button>
      `,
      directives:[MarkerComponent]
    })
    export class MapComponent {
      constructor() {
        this.markers = [
          new Marker('m0', 0),
          new Marker('m1', 1),
          new Marker('m2', 2),
          new Marker('m3', 3)
        ];
      }
    
      update() {
        this.markers[1].name = 'm1a';
      }
    }
    
  • Marqueur code> Composant P>

    @Component({
      selector: 'marker',
      template:`
        <div class="marker">Marker {{model.name}} <button (click)="update()">Update</button></div>
      `,
      directives:[MarkerComponent]
    })
    export class MarkerComponent implements OnInit {
      @Input() model: Marker;
    
      constructor() {
    
      }
    
      ngOnInit() {
      }
    
      update() {
        this.model.name = this.model.name + 'a';
      }
    }
    
  • mappe code> composant p>

    class Marker {
      name: string;
      position: int;
    
      constructor(name, position) {
        this.name = name;
        this.position = position;
      }
    }
    


4 commentaires

Merci pour votre contribution. Avant de lancer la Bounty, j'ai mis à niveau vers la dernière version bêta. Cependant cela a donné les mêmes résultats.


Auriez-vous un repo d'où je peux tester? Merci!


J'ai fait des tests supplémentaires mais je ne peux pas reproduire votre problème. J'ai définitivement besoin de certaines choses (Plunkr ou Github Repo) pour pouvoir reproduire votre problème et essayer de trouver un correctif ;-)


Merci beaucoup pour cette réponse. C'est exactement ce que je cherchais. Question rapide, pourquoi incluez-vous MarkerComponent comme une directive dans MarkerComponent? Était-ce une erreur de copie et de pâte?