web-dev-qa-db-fra.com

Supprimez la balise du composant hôte du HTML dans angular 4

J'ai une table dans laquelle je veux afficher une ligne de table, qui est un composant. Et aussi je veux passer des données à ce composant:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

Dans my-component, le HTML est un peu <td></td> avec des données rendues à partir de data1 et data2.

Mais après l'avoir rendu, à cause de <my-component></my-component> mon CSS se brise, entraînant tous my-component HTML (ligne entière du tableau) affiché dans la 1ère colonne.

Résultat ci-dessus:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

J'ai essayé ce qui suit:

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

Mais cela entraîne une erreur Can't bind to 'data1' since it isn't a known property of 'tr'.

Je ne peux pas non plus utiliser @Directive comme je veux rendre le HTML.

Comment puis-je rendre le modèle de <my-component></my-component> sans pour autant <my-component></my-component> tag?

Les autres réponses sont des versions précédentes d'angular. J'utilise Angular 4.3.4.

Toute aide serait appréciée..!

htmlcssangularangular-directiveangular-template
18
AjinkyaBhagwat

vous devez également inclure tr dans le sélecteur comme ci-dessous,

@Component({
 selector: 'tr[my-component]',
 template: `
   <td>{{data1.prop1}}</td>
   <td>{{data1.prop2}}</td>
   <td>{{data2.prop1}}</td>
 `
})
export class MyComponent {
  @Input() data1;
  @Input() data2;
}

Vérifiez cela Plunker !!

J'espère que cela t'aides!!

13
Madhu Ranjan