Question

我已经从api中获取了数据，并且得到的输出（所有用户名都存储在api中）为-

 Leanne Graham
 Ervin Howell
 Clementine Bauch
 Patricia Lebsack
 Chelsey Dietrich
 Mrs. Dennis Schulist
 Kurtis Weissnat
 Nicholas Runolfsdottir V
 Glenna Reichert
 Clementina DuBuque

现在假设如果我想做一些像padding：20px这样的样式，那么整个名称列表将移动20px。如何在此列表中设置特定名称的样式？假设我只想在特定名称上设置样式（如边距或填充），那么有可能做到这一点吗？

这是我的代码-

home.component.html

 <div *ngIf="dataItem?.length>0">           
      <div *ngFor='let x of dataItem'>
             <div class="design">
                {{x.name}}
             </div>
      </div>
 </div>

home.component.css

 .design
   {
     padding-left: 20px;
   }

home.component.ts

  export class HomeComponent implements OnInit {
     dataItem:any = {} 
     constructor(private data: DataService) {
        this.data.getuserdetails().subscribe(item=>{
          console.log(item);
          this.dataItem=item;
       });
      }
     ngOnInit()
         {}
     }

home.service.ts

export class DataService {
  constructor(private http: HttpClient) {}
   getuserdetails(){
     return this.http.get<any> 
    ('http://jsonplaceholder.typicode.com/users')
    .pipe(map(item => {
        return item;
    }));
  }
 }

Answer 1

有几种方法可以实现您想要的，我建议使用CSS选择器。

例如，仅适用于名字，您可以将CSS类声明为：

.design:first-child
{
    padding-left: 20px;
}

它只会自动应用于名字（因为名字是列表中唯一的第一个孩子。）

有关更多选择器及其功能，you can take a look here

一些注意事项：

在编写时，您无需在服务中使用map运算符，只需编写以下内容即可：

export class DataService {
  constructor(private http: HttpClient) {}
   getuserdetails(){
     return this.http.get<any>('http://jsonplaceholder.typicode.com/users');
  }
}

最好订阅ngOnInit，以确保在视图中正确设置了所有内容：

export class HomeComponent implements OnInit {
     dataItem:any = {} 
     constructor(private data: DataService) {}
     ngOnInit(){
         this.data.getuserdetails().subscribe(item=>{
          console.log(item);
          this.dataItem=item;
       });
     }
}

Answer 2

您可以使用ngClass：

<div class="design" [ngClass]="{'customClass': x.name =='Leanne Graham'}">
   {{x.name}}
</div>

CSS：

.customClass {
  margin-left: 20px
}

WORKING_DEMO

设置从api中以角度

2 个答案: