如何使用 JSON 文件中的数据来设置某些 HTML 元素的宽度？

Question

我想从JSON个对象中获取特定的数据，并用它来设置各种标签的宽度。

JSON对象是这样的：

"habilidades": [
    {
        "name": "Manejo del Tiempo",
        "description": "Capacidad para priorizar tareas a fin de cumplir con los plazos.",
        "percentage": "85%",
        "width": "85%"
    },
    {
        "name": "Trabajo en Equipo",
        "description": "Facilidad para trabajar en grupos interdisciplinarios",
        "percentage": "90%",
        "width": "90%"
    },
   ]

我有一个发送 GET 请求的服务，returns 数据集：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
 providedIn: 'root'
})
export class PortfolioService {

 constructor(private http: HttpClient) { }

 obtenerDatos(): Observable<any> {
  return this.http.get('./assets/data/data.json');
 }
}

然后，组件订阅这个并将数组分配给一个变量：

export class HabilidadesComponent implements OnInit {
  
  habilidadesList: any;
  constructor(private datosPortfolio: PortfolioService) { }
  
  ngOnInit(): void {
    this.datosPortfolio.obtenerDatos().subscribe(data => {
      this.habilidadesList = data.habilidades;
    })
  }
}

到目前为止一切顺利（我认为）... 然后，在 HTML 中，我有一个遍历数组的 *ngFor 指令：

<div *ngFor="let habilidad of habilidadesList">
 <div class="col d-flex align-items-start">
  <div>
   <h4 class="fw-bold mb-0">{{ habilidad.name }}</h4>
   <p>{{ habilidad.description }}</p>
   <div class="barra-progreso">
   <span style="width: ">{{ habilidad.percentage }}</span> <!-- I want habilidad.width value to set the width of span.-->
  </div>
 </div>
</div>

我想 habilidad.width 设置 <span> 元素的宽度。我不知道该怎么做。我已经尝试属性绑定，使用 *ngStyle 指令但无法使其工作。

Answer 1

您可以使用 [style.width.%]

绑定宽度

<span [style.width.%]="habilidad.width"></span>

你也可以像下面这样使用px,em

<div [style.width.em]="width"> Width Size with em</div>
<div [style.width.pt]="width"> Width Size with pt</div>

如何使用 JSON 文件中的数据来设置某些 HTML 元素的宽度？

How can I use data from JSON file to set the width of some HTML elements?

css

angular

typescript

angular-directive