Почему метод обновления данных о Посте не работает?

Question

[kikosko]

Когда я нажимаю кнопку «Edit», информация о конкретном посту попадает в поля ввода, но когда я нажимаю кнопку «updatePost» для обновления этих данных, информация обновляется по всем постам кроме того, где я хочу обновить информацию. Помогите решить эту проблему и понять что я делаю не так

Темплейт компонента редактирования:

<form [formGroup]="angFormEd" novalidate>
            <div class="form-group">
                <label class="col-md-4">Picture Title</label>
                <input type="text" class="form-control" formControlName="titleEd" minlength="1" #titleEd
                       [(ngModel)]="edData.title"/>
            </div>

            <div class="form-group">
                <label class="col-md-4">Picture Address (url)</label>
                <input type="url" class="form-control" formControlName="urlEd" #urlEd pattern="https?://.+"
                       title="Include http://" [(ngModel)]="edData.url"/>
            </div>
   
            </div>
            <div class="form-group but-group">
                <button (click)="updatePost(titleEd.value, urlEd.value, edData.id); angFormEd.reset(titleEd.value, urlEd.value)"
                      
                        class="btn btn-primary">Update Post
                </button>
            </div>
        </form>
    </div>
</div>

ТС компонента редактирования:

editPost(picId: Picture[]): void {
        this.edData = picId;
    }

    updatePost(title: string, url: string, id:number): void {
        const update: Picture[] = this.collection.map((p)=>{
            p.id  = id;
            p.title = title;
            p.url = url
        });
    }

Comments

[Сергей]

у тебя map ничего не возвращает

Answer 1

[0xD34F]

updatePost(title: string, url: string, id:number): void {
    const update: Picture[] = this.collection.map((p)=>{
        p.id  = id;
        p.title = title;
        p.url = url
    });
}

Если цель - обновление элементов массива, надо использовать forEach вместо map, и нет необходимости в получении результата. И зачем вы обновляете весь массив, если по вашим же словам обновить нужно всего один элемент? Или вы не понимаете, что происходит в этом коде?

Надо по id найти нужный элемент и обновить только его:

Object.assign(this.collection.find(n => n.id === id), { title, url });

UPD. Ещё странный момент. Если верить вашему коду, то свойство edData является массивом:

editPost(picId: Picture[]): void {
    this.edData = picId;
}

А если смотреть на шаблон - предполагается, что это объект:

<button (click)="updatePost(titleEd.value, urlEd.value, edData.id);

Откуда у edData возьмётся id, если это массив?

Comments

[kikosko]

<div class="col-lg-3 col-md-4 col-6" *ngFor="let pic of collection">
        <app-gallery-item [pic]="pic" (remove)="removePost($event)" (edit)="editPost($event)"></app-gallery-item>
    </div>
<button class="btn btn-success ed" (click)="editPost(pic)">Edit</button>

this.edData = picId;
Я хотел передать id объекта в параметры метода updatePost(title: string, url: string, id:number) для того что бы получить нужный мне пост

[0xD34F]

kikosko, да это понятно, что вы хотели. Я о другом - какого чёрта вы передаёте массив, а работаете с ним, как с объектом? Или вам до сих пор это не кажется странным?

[kikosko]

0xD34F, я Вас понял, спасибо)