我想從 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 請求：
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指令進行屬性系結，但無法使其作業。
uj5u.com熱心網友回復：
You can bind the width using [style.width.%]
<span [style.width.%]="habilidad.width"></span>
You can also make use of px, em like below
<div [style.width.em]="width"> Width Size with em</div>
<div [style.width.pt]="width"> Width Size with pt</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/439294.html