angular 8, как изменить класс 1 деления вместо всего в ng для l oop на клике - PullRequest
Новая
       35

angular 8, как изменить класс 1 деления вместо всего в ng для l oop на клике

0 голосов
/ 30 января 2020

Это - самый близкий вопрос, который я мог найти к тому, что я спрашиваю, но они вручную применяют индекс и имеют несколько элементов, а я нет.

Есть ли способ изменить специфика c элемента class в компоненте?

html

здесь я получаю идентификатор из выбранного элемента просто отлично, но я изменяю класс по клику, завершение задачи. Когда я нажимаю кнопку завершения, все задачи в l oop возвращаются завершенными. Я не уверен, как эффективно использовать i здесь, потому что onclick Я также отправляю запрос на поставку, поэтому я не могу добавить больше информации в функцию, не отправляя также в базу данных, где она мне не нужна ...

<tr *ngFor="let task of tasks; let i = index;">

<button mat-button
            class="btn"
            [ngClass]="status ? 'btn-lemon-complete' : 'btn-lemon'"
            [disabled]="status ? true : false"
            (click)="completeTask(task._id)"
            >{{ status ? 'Completed' : 'Complete Task' }}</button>

            <button mat-button
            class="btn delete"
            *ngIf="status"
            >✘</button>

компонент 

completeTask(taskId, data): any {
    this.status = true;
    this.triggerService.updateTask(taskId, data).subscribe(res => {
    });

    let item = taskId;
    let index = this.tasks.indexOf(taskId);
    console.log(item, index, this.tasks);
}

console.log(item, index, this.tasks); возвращает id, -1, [0{task here}1{task here}]

Я думаю, что я получаю -1, потому что фактическое поле _id находится в позиции -1 единственной задачи, которую я нажимаю.

Как мне добиться того, что я пытаюсь? Спасибо.

Ответы [ 2 ]

1 голос
/ 30 января 2020

Вы можете попробовать это решение

компонент. html

<button mat-button
    class="btn"
    [ngClass]="task.status ? 'btn-lemon-complete' : 'btn-lemon' "
    [disabled]="task.status ? false : true"
    (click)="completeTask(task)"
>
{{ task.status ? 'Completed':'Complete Task' }}
</button>

component.ts 

completeTask(task, data?): any {
    this.triggerService.updateTask(task._id, data).subscribe(res => {
    });
    task.status=true;
}

РЕДАКТИРОВАТЬ - Выполнено задание из html, второй параметр необязательный

0 голосов
/ 30 января 2020

Вы можете попробовать связывание классов: 

[class.btn-lemon-complete]="status"

ссылка на документы: https://angular.io/guide/template-syntax#class -binding

...