web-dev-qa-db-fra.com

Comment puis-je passer un tableau en tant que Input () à partir du modèle de composant?

Je dois passer un tableau de valeurs à un composant en utilisant la liaison, par exemple.

@Component({
    selector: 'my-component',
    template: '<div data="[1, 2, 'test']"></div>
})
export class MyComponent {
    @Input() data: any[];
    ...
}

Cependant, il semble que Angular traite cela comme string/string[1] _ (dans le projet actuel, le tableau est une route et je dois transmettre cette route à un composant qui a le [routerLink] directive).

Comment puis-je m'y prendre?

angularangular2-template
34
Thorsten Westheider

Vous devez envelopper la propriété avec [] sinon il n’est pas traité par Angular du tout:

[data]="[1, 2, 'test']"

Votre exemple semble définir data depuis l'intérieur du composant. Ce n'est pas comment la liaison fonctionne. Ce que vous pouvez faire avec votre composant est <my-component [data]="[1, 2, 'test']"></my-component> pour transmettre des données de l’extérieur à votre composant.

59
Günter Zöchbauer

Commençons donc à partir de maintenant ... dans Angular 2 + toutes les entrées passeront à une chaîne si elles ne disposent pas de crochets ...

Donc, il y a 2 façons de transmettre vos valeurs ...

si vous l'écrivez comme ceci: '<div data="[1, 2, 'test']"'

vous obtenez essentiellement comme "[1, 2, 'test']" (sous forme de chaîne) ...

Votre façon de faire est un bon moyen de transmettre chaînes, et vous pouvez également utiliser une interpolation et le mélanger avec du javascript avant de le transmettre, comme "Angular {{version}}".

Donc, pour le transmettre sous la forme d'un tableau ou de toute valeur javascript aucune méthode, vous devez utiliser [] autour de votre contribution comme ça ...

<div [data]="[1, 2, 'test']"></div>
10
Alireza

Normalement, vous n'utilisez l'entrée que lorsque le composant est imbriqué dans un autre composant.

Donc, dans un autre composant, quelque chose comme: <my-component [data]= ...>

1
DeborahK