Блог

Главная - Вопросы по программированию - Как изменить свойства элементов начальной загрузки в Angular

Как изменить свойства элементов начальной загрузки в Angular

#javascript #html #css #angular #typescript

Вопрос:

Я хотел бы обновить свойство индикатора выполнения aria-valuenow индикатора выполнения начальной загрузки, используя привязку данных в Angular, но мне трудно понять, какие команды использовать

 <div class="row">
    <div class="col-12 col-xl-3 col-lg-4 col-sm-6" *ngFor="let corso of corsi">
        <div class="card">
            <img class="card-img-top w-100 d-block" src="../assets/img/pexels-pixabay-247791.jpg">
            <div class="card-body">
                <div class="card-img-overlay">
                    <h3>{{corso.titolo}}</h3>
                </div>

                <p class="card-text pb-2 fw-bold">Avanzamento corso: {{corso.progresso}}%</p>

                <div class="progress">
                    <div class="progress-bar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                </div>   
             
                <p class="card-text pt-3">Data scadenza: {{corso.scadenza}}</p>
            </div>
            <button class="btn btn-primary d-flex align-items-center" type="button">Vedi corso</button>
        </div>
    </div>
</div>

Я попытался получить атрибут из DOM с помощью element.getElementsByClassName , так как я повторяю макет массива, но я не могу понять, как получить доступ к массиву HTMLCollection

 import { Component, OnInit } from '@angular/core';
import { CORSI } from '../../mock-corsi'

@Component({
    selector: 'app-card',
    templateUrl: './card.component.html',
    styleUrls: ['./card.component.css']
})

export class CardComponent implements OnInit {
    corsi = CORSI;

    constructor() { 
        console.log("Constructor partito")
    
        var bar = document.getElementsByClassName('progress-bar');
        console.log(bar);
    }
    ngOnInit(): void { }
}

Массив htmlколлекций

Это очень простое приложение, но я хотел бы понять, как получить доступ к таким данным, спасибо.

Ответ №1:

Если все, что вы хотите сделать, это сделать aria-valuenow атрибут динамичным, вы можете сделать это, используя этот синтаксис.

 [attr.aria-valuenow]="valueNow"

где valueNow будет указано в вашем .ts файле.

Ваш HTML теперь будет выглядеть так:

 <div class="progress-bar" [attr.aria-valuenow]="valueNow" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>

и в вашем .ts досье вы можете иметь

valueNow : number = 80;

Комментарии:

1. SO хочет знать valueNow , что установлено по умолчанию в OnInit (80 может быть 100 и т. Д.)

2. Отчасти я хотел бы сделать его динамичным, как и другие фрагменты {{кода}} в HTML, получая данные из массива «corsi» в .ts и помещая их в элемент div индикатора выполнения. Ваше решение не работает в банкомате.

3. Можете ли вы воссоздать проблему в stackblitz?

4. Я новичок в stackblitz, поэтому позже я посмотрю, в любом случае проблема только в компоненте, который вы видите в моем посте. Есть ли что-то конкретное, что вы хотите увидеть, чтобы понять больше? Спасибо, что уделили мне время

Ответ №2:

Используется [attr.somthing] для установки attr с привязкой . для установки текущего значения используйте ссылку # с getAttribute

В HTML

 <div #ref [attr.aria-valuenow]="setAttr(ref)"></div>

В ТС

 setAttr(ref){
   return ref.getAttribute('aria-valuenow')   20;
}
Метки: