css 如何显示同一属性的4列，而不会使html表中的值增加四倍？

pieyvz9o 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(116)

我在Angular中有一个系统，我调用口袋妖怪tcg API，我只对“cards.images.small”属性感兴趣，该属性负责显示图像链接。但我无法让它正常显示卡片。目前它们是四倍。

<div class="scroll">
        <span class="font-extrabold text-3xl" style="color: #ffcb08;" *ngIf="spinner">Carregando cartas</span>
        <table  *ngIf="!spinner" mat-table [dataSource]="dataSource" class="mat-elevation-z8 mat-table">
        
          <ng-container  matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef></th>
            <td (click)="addCard(element)" mat-cell *matCellDef="let element"> <img class="card" [src]="element.images?.small" alt=""> </td>
          </ng-container>
          <ng-container  matColumnDef="position2">
            <th mat-header-cell *matHeaderCellDef></th>
            <td (click)="addCard(element)" mat-cell *matCellDef="let element"> <img class="card" [src]="element.images?.small" alt=""> </td>
          </ng-container>
          <ng-container  matColumnDef="position3">
            <th mat-header-cell *matHeaderCellDef></th>
            <td (click)="addCard(element)" mat-cell *matCellDef="let element"> <img class="card" [src]="element.images?.small" alt=""> </td>
          </ng-container>
          <ng-container  matColumnDef="position4">
            <th mat-header-cell *matHeaderCellDef></th>
            <td (click)="addCard(element)" mat-cell *matCellDef="let element"> <img class="card" [src]="element.images?.small" alt=""> </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        
        </table>
      </div>

字符串
Cards quadrupled
它看起来像这样：desirable

css

来源：https://stackoverflow.com/questions/77719501/how-to-display-4-columns-of-the-same-attribute-without-quadrupling-the-values-i

1条答案

按热度按时间

uoifb46i1#

我这样解决

<source src="../../../assets/pfhd.mp4" type="video/mp4">
</video>

<button (click)="goHome()" class="m-4" style="background-color: #fcea69; color: black;" mat-raised-button>Voltar ao menu principal</button>
 <div class="flex items-center justify-center  ">
   <div class="flex space-x-4 justify-center p-8">
     <span class="font-extrabold text-3xl text-center" style="color: #ffcb08;" *ngIf="spinner && exibe_title">Carregando</span>
     <div class="scroll">
       <div class="flex flex-wrap -mx-4 container p-4">
         <div  *ngFor="let item of deckCards" class="w-full md:w-1/2 lg:w-1/5 px-4 mb-4">
           <img *ngIf="!spinner" (click)="addCard(item)" [src]="item.images.small" class="w-36 h-auto">
         </div>
     </div>
     </div>
     <div  *ngIf="exibeFiltro" style="height: 350px; position: fixed; right: 50px;" class="info-deck bg-white p-8 shadow-md rounded-md">
       <mat-form-field>
         <mat-label>Nome do Deck</mat-label>
         <input  [(ngModel)]="nameDeck"  matInput placeholder="Nome do Deck" #input>
       </mat-form-field><br>
       <mat-form-field>
         <mat-label>Filtrar  Carta</mat-label>
         <input (keyup.enter)="getCardByName()" [(ngModel)]="userInput" matInput placeholder="Presisone ENTER" #input>
       </mat-form-field> 
       <h3 class="text-center">Cartas Adicionadas: {{contadorCards}}</h3>
       <div class="flex w-full justify-around">
         <button [disabled]="paginatorOFF" (click)="onBeforePage()" mat-mini-fab style="background-color: #004a94; color: white;">
           <mat-icon>navigate_before</mat-icon>
         </button>
         <button class="mt-14" (click)="createDeck()" style="background-color: #004a94; color: white;" mat-raised-button>Salvar Deck <mat-icon aria-hidden="false" fontIcon="add_circle"></mat-icon></button>
         <span style=" position: fixed; right: 185px;" class="text-center mt-2">{{contadorPage}}/68</span> <br>
         <button [disabled]="paginatorOFF" (click)="onNextPage()" class="ml-3" mat-mini-fab style="background-color: #004a94; color: white;">
           <mat-icon>navigate_next</mat-icon>
         </button>
       </div>
   </div>
     
   </div>
 </div>

字符串

我删除了表并创建了一个ngFor for标签。我需要调整过滤器，这些过滤器只过滤旧表中的数据。

赞(0）回复(0）举报 2024-01-09

我来回答

css 如何显示同一属性的4列，而不会使html表中的值增加四倍？

1条答案

相关问题

热门标签

最新问答