Как менять значение переменой в отдельном элементе?

Question

[kikosko]

Когда условие переключения в методе toggleDate срабатывает, я также хочу изменить значение переменной «format» в отдельном элементе, сейчас при нажатии меняется формат даты всех элементов. Как это реализовать ?

<div class="col-lg-3 col-md-4 col-6" *ngFor="let pic of collection; ">
        <div class="info">
                <img [src]="pic.url" alt="test" class="img-responsive">
                <p class="lead"><span>{{pic.id}}:</span>{{pic.title}}</p>
                <p class="more-info-text">Orc birthday: {{bDay | date: format}}</p>
        </div>
        <div class="card buttons">
            <button class="btn btn-info" (click)="toggleDate(pic.id)">{{toggDate[pic.id] ? 'Full date' : 'Short date'}}</button>
        </div>
    </div>

export class GalleryComponent implements OnInit {
    bDay: object = new Date();
    toggDate: any = [];
    format: string;

    constructor() {}

    toggleDate(picId: number) {
        this.toggDate[picId] = !this.toggDate[picId];
        if (this.toggDate[picId]) {
            this.format = 'shortDate';
        } else {
            this.format = 'fullDate';
        }
    }
}

Answer 1

[0xD34F]

Замените

{{bDay | date: format}}

на

{{ date | date : toggDate[pic.id] ? 'fullDate' : 'shortDate' }}

А свойство format можно удалить.