Dev Faq
-1
votes

Colspan ne s'était pas appliqué correctement

J'ai généré une table dynamique en angulaire 7. J'essaie de faire un colspan qui crée des éléments supplémentaires à la fin. Pas certain de pourquoi? De plus, ce dont j'ai besoin, c'est que le colspan doit être dynamique. Par E.g, les colonnes pourraient être n'importe quel nombre. Selon le numéro de colonne, le Colspan devrait s'appliquer. Si vous voyez ici, les colonnes sont basées sur le nombre d'enregistrements

html: xxx

capture d'écran:

Entrez la description de l'image ici

Je partage le Jsfiddle .

1 commentaires

La structure du

va mal pour moi. On dirait que vous répétez [colspan] plusieurs fois sur une seule ligne.

3 Réponses :

0
votes

Essayez d'utiliser [attr.colspan]

par exemple: xxx

1 commentaires

Avez-vous essayé dans le violon que je vous ai donné car il ne fonctionne pas pour moi dans le code actuel

0
votes

Utiliser colspan comme 1, on dirait que vous essayez d'attribuer une colonne pour chaque enregistrement.

Fiddle de travail

3 commentaires

Je ne peux pas voir des éléments supplémentaires à la fin, quel problème réel? \

Mettre 7 ou 8 pour Colspan dans le violon et vous le verrez

Je pense que la question est la boucle

0
votes

Vous devez inclure l'index dans votre * NGIF et * NGFOR. Vous êtes itérant sur le TD 7 fois et colspan = 8 sur chacun d'eux. De cette façon, vous devez simplement ajouter le TD sur la première itération. 

    <table class="fundClassesTable table-striped" border="1">
      <tr *ngFor="let c of ColumnNames; let i = index">
        <th class="tableItem bold">{{ c }}</th>
        <ng-container *ngFor="let f of data">
          <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
           <td class="tableItem" *ngIf="c == ColumnNames[3]">COMMERCIAL TERMS</td>
          <td class="tableItem" *ngIf="c == ColumnNames[4]">
              <button type="button" class="btn btn-default btn" style="float: left;"
                  (click)="buttonClicked(f.Id)">Review Terms</button>
          </td>
          <td [colSpan]="8" class="tableItem" *ngIf="c == ColumnNames[5] && i == 0"></td>
          <td  *ngIf="c == ColumnNames[6]" class="tableItem"> {{f.PrimaryCurrencyName}}</td>

        </ng-container>
      </tr>
      </table>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube
erreur NG6002: apparaît dans le NgModule.imports d'AppModule, mais n'a pas pu être résolu en une classe NgModule
[ng update]: Erreur - Le package "@ angular-devkit / schematics" ne peut pas être résolu à partir du répertoire racine de l'espace de travail