Question

我想显示板球队的详细信息。表格的第一行是队长，所以对于第一行的每种颜色，我都希望将字体大小设置为绿色和粗体

这是我的HTML：

 <div >
     <table id="sports" border=1 align=center >
         <thead >
         <tr>
             <th>Team1</th>
             <th>Team2</th>
         </tr>
         </thead>
         <tbody  *ngFor="let T of Teams" >
                 <td> {{T.Indian_players}}</td>
                 <td>{{T.Australia_players}}</td>
             </tr>
         </tbody>
     </table>
</div>

这是我的模型，我在其中获取了静态数据：

export const Players=[
        {Indian_players:'Kohili(c)',Australia_players:'David Warner(c)',Pakistan_players:'shaheen Afridi(c)',Southafrica_players:'dale steyn(c)',England_players:'Harry Kane(c)'},
        {Indian_players:' Dhoni',Australia_players:'Steve Smith',Pakistan_players:'sarfraz Ahmed',Southafrica_players:'du plessis',England_players:'Joe Root'},
        {Indian_players:'Rohit Sharma',Australia_players:'Glen Maxwell',Pakistan_players:'Babar Azam',Southafrica_players:'Imran Tahir',England_players:'Alex Hales'},
        {Indian_players:'Jadeja',Australia_players:'Aron Finch',Pakistan_players:'Mohamad Hafeez',Southafrica_players:'David Miller',England_players:'James Anderson'},
        {Indian_players:'K.L.Rahul',Australia_players:'Mitchel Starc',Pakistan_players:'Imad Wasim',Southafrica_players:'Jp duminy',England_players:'Moeen Ali'},
        {Indian_players:'Bhuvaneswar Kumar',Australia_players:'Travis Head',Pakistan_players:'Shadab khan',Southafrica_players:'de kock',England_players:'Jos Buttler'},
        {Indian_players:'Shikar Dhawan',Australia_players:'Pat cummins',Pakistan_players:'yasir shah',Southafrica_players:'Hashim Amla',England_players:'Ben Strokes'},
        {Indian_players:'RishabPanth',Australia_players:'Mitchel Marsh',Pakistan_players:'Imam-ul-haq',Southafrica_players:'chris morris',England_players:'Sam Billings'},
        {Indian_players:'Ashwin',Australia_players:'Peter siddle',Pakistan_players:'Faheem Ashraf',Southafrica_players:'Aiden markram',England_players:'Eoin Morgan'},
        {Indian_players:'Dinesh Karthik',Australia_players:'Tim Paine',Pakistan_players:'Shoib Malik',Southafrica_players:'Dean Elgar',England_players:'chris Woakes'},

Answer 1

您可以执行以下操作。

<tbody>
    <tr *ngFor="let T of Teams; let i = index" [class.your-captain-css-class]="index===0">
        <td> {{T.Indian_players}}</td>
        <td>{{T.Australia_players}}</td>
    </tr>
</tbody>

我已经完成了以下工作。

获取索引和对象。
如果索引为0，则添加类。

这可以满足您的要求。只有CSS才有另一种方式。

Answer 2

您可以通过CSS做到这一点

custom-class:first-child { 
   color: yellow;
   font-size: 15px;
}

另外，您的示例中有一个错误，即主体内部没有结束tr标签，但内部没有开始tr标签。

<tbody  *ngFor="let T of Teams" >
       <td> {{T.Indian_players}}</td>
       <td>{{T.Australia_players}}</td>
     </tr>
</tbody>

我相信阅读注释后，您可以/应该这样做，并在顶部使用CSS，并且应该都能正常工作，这是我建议使用类而不是tr的原因，因为如果您使用tr，那么您会使用tr more然后一次，它将影响所有tr标签，而不只是您体内想要的标签。

 <tbody>
    <tr *ngFor="let T of Teams" class="custom-class">
        <td> {{T.Indian_players}}</td>
        <td>{{T.Australia_players}}</td>
    </tr>
</tbody>

更改表格第一行的字体大小和颜色

2 个答案: