Блог

Когда пользователь нажимает кнопку «Добавить» под фотографией, эта конкретная фотография должна быть добавлена в таблицу рядом со списком, а кнопка «Добавить» должна превратиться в кнопку «УДАЛИТЬ».

напр..

Текущее состояние:

Ожидаемые результаты:

Шаблон:

 lt;div class="row"gt;  lt;div class="container col-6"gt;  lt;h1gt;Listlt;/h1gt;  lt;div class="row"gt;   lt;div class="col-3" *ngFor="let a of data"gt;  lt;div class="row"gt;lt;img src="{{a.url}}" style="height: 100px; padding: 10px;"gt; lt;/divgt;  lt;div class="row" style=" padding: 10px;"gt;lt;button class="btn btn-primary" (click)="onclick(a)"gt;Addlt;/buttongt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="container col-6"gt;  lt;h1gt;Tablelt;/h1gt;  lt;table class="table"gt;  lt;theadgt;  lt;trgt;  lt;th scope="col"gt;Photolt;/thgt;  lt;th scope="col"gt;Idlt;/thgt;  lt;th scope="col"gt;URLlt;/thgt;  lt;th scope="col"gt;Titlelt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbody *ngFor="let s of array"gt;  lt;tr (click)="DeleteItem(s.id)"gt;  lt;th scope="col"gt;lt;img src="{{s.url}}" style="height: 30px; padding: 10px;"gt;lt;/thgt;  lt;th scope="col"gt;{{s.id}}lt;/thgt;  lt;th scope="col"gt;{{s.url}}lt;/thgt;  lt;th scope="col"gt;{{s.title}}lt;/thgt;  lt;/trgt;   lt;/tbodygt;  lt;/tablegt;  lt;/divgt; lt;/divgt;  

Компонентная логика:

 data: any = [{  "albumId": 1,  "id": 1,  "title": "accusamus beatae ad facilis cum similique qui sunt",  "url": "https://via.placeholder.com/600/92c952",  "thumbnailUrl": "https://via.placeholder.com/150/92c952"  },  {  "albumId": 1,  "id": 2,  "title": "reprehenderit est deserunt velit ipsam",  "url": "https://via.placeholder.com/600/771796",  "thumbnailUrl": "https://via.placeholder.com/150/771796"  },  {  "albumId": 1,  "id": 3,  "title": "officia porro iure quia iusto qui ipsa ut modi",  "url": "https://via.placeholder.com/600/24f355",  "thumbnailUrl": "https://via.placeholder.com/150/24f355"  },  {  "albumId": 1,  "id": 4,  "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",  "url": "https://via.placeholder.com/600/d32776",  "thumbnailUrl": "https://via.placeholder.com/150/d32776"  },  {  "albumId": 1,  "id": 5,  "title": "natus nisi omnis corporis facere molestiae rerum in",  "url": "https://via.placeholder.com/600/f66b97",  "thumbnailUrl": "https://via.placeholder.com/150/f66b97"  },  {  "albumId": 1,  "id": 6,  "title": "accusamus ea aliquid et amet sequi nemo",  "url": "https://via.placeholder.com/600/56a8c2",  "thumbnailUrl": "https://via.placeholder.com/150/56a8c2"  },  {  "albumId": 1,  "id": 7,  "title": "officia delectus consequatur vero aut veniam explicabo molestias",  "url": "https://via.placeholder.com/600/b0f7cc",  "thumbnailUrl": "https://via.placeholder.com/150/b0f7cc"  },  {  "albumId": 1,  "id": 8,  "title": "aut porro officiis laborum odit ea laudantium corporis",  "url": "https://via.placeholder.com/600/54176f",  "thumbnailUrl": "https://via.placeholder.com/150/54176f"  },  {  "albumId": 1,  "id": 9,  "title": "qui eius qui autem sed",  "url": "https://via.placeholder.com/600/51aa97",  "thumbnailUrl": "https://via.placeholder.com/150/51aa97"  },  {  "albumId": 1,  "id": 10,  "title": "beatae et provident et ut vel",  "url": "https://via.placeholder.com/600/810b14",  "thumbnailUrl": "https://via.placeholder.com/150/810b14"  },  {  "albumId": 1,  "id": 11,  "title": "nihil at amet non hic quia qui",  "url": "https://via.placeholder.com/600/1ee8a4",  "thumbnailUrl": "https://via.placeholder.com/150/1ee8a4"  },  {  "albumId": 1,  "id": 12,  "title": "mollitia soluta ut rerum eos aliquam consequatur perspiciatis maiores",  "url": "https://via.placeholder.com/600/66b7d2",  "thumbnailUrl": "https://via.placeholder.com/150/66b7d2"  },  {  "albumId": 1,  "id": 13,  "title": "repudiandae iusto deleniti rerum",  "url": "https://via.placeholder.com/600/197d29",  "thumbnailUrl": "https://via.placeholder.com/150/197d29"  },  {  "albumId": 1,  "id": 14,  "title": "est necessitatibus architecto ut laborum",  "url": "https://via.placeholder.com/600/61a65",  "thumbnailUrl": "https://via.placeholder.com/150/61a65"  },  {  "albumId": 1,  "id": 15,  "title": "harum dicta similique quis dolore earum ex qui",  "url": "https://via.placeholder.com/600/f9cee5",  "thumbnailUrl": "https://via.placeholder.com/150/f9cee5"  }, ]; array: any = [] comaprebnt: boolean = false; removebnt: boolean = true  constructor() {}  ngOnInit() {  } onclick(a) {  console.log(a)  this.array.push(a) }  

Когда пользователь нажимает кнопку УДАЛИТЬ над фотографией на странице списка фотографий, эта фотография должна быть удалена из таблицы.

 public objArray = [  {  value:"item1",  isAdded: false  },  {  value:"item2",  isAdded: false  } ]  public addRemoveElement(index: number){  objArray.forEach(elem:any, ind:number)=gt;{  if(ind === index) elem.isAdded = !elem.isAdded;  }) }   ----------------------------------------- .redbg{   background: red; }  lt;div *ngFor="let obj in objArray; let ind=index"gt;  lt;div [class.redbg]="obj.isAdded" (click)="addRemoveElemen(ind)"gt;{{ item.isAdded ? 'Remove' : 'Add' }}lt;/divgt; lt;/divgt;  

Вы должны установить массив, подобный этому, я добавил один тип ключа, какой бы тип вы ни выбрали, и установил любое значение ключа, как я установил

 data: any = [{  "albumId": 1,  "id": 1,  "title": "accusamus beatae ad facilis cum similique qui sunt",  "url": "https://via.placeholder.com/600/92c952",  "thumbnailUrl": "https://via.placeholder.com/150/92c952",  "type": "add" }, {  "albumId": 1,  "id": 2,  "title": "reprehenderit est deserunt velit ipsam",  "url": "https://via.placeholder.com/600/771796",  "thumbnailUrl": "https://via.placeholder.com/150/771796",  "type": "delete" }, {  "albumId": 1,  "id": 3,  "title": "officia porro iure quia iusto qui ipsa ut modi",  "url": "https://via.placeholder.com/600/24f355",  "thumbnailUrl": "https://via.placeholder.com/150/24f355",  "type": "add" }, {  "albumId": 1,  "id": 4,  "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",  "url": "https://via.placeholder.com/600/d32776",  "thumbnailUrl": "https://via.placeholder.com/150/d32776",  "type": "delete" }, {  "albumId": 1,  "id": 5,  "title": "natus nisi omnis corporis facere molestiae rerum in",  "url": "https://via.placeholder.com/600/f66b97",  "thumbnailUrl": "https://via.placeholder.com/150/f66b97",  "type": "add" }, {  "albumId": 1,  "id": 6,  "title": "accusamus ea aliquid et amet sequi nemo",  "url": "https://via.placeholder.com/600/56a8c2",  "thumbnailUrl": "https://via.placeholder.com/150/56a8c2",  "type": "add" }, {  "albumId": 1,  "id": 7,  "title": "officia delectus consequatur vero aut veniam explicabo molestias",  "url": "https://via.placeholder.com/600/b0f7cc",  "thumbnailUrl": "https://via.placeholder.com/150/b0f7cc",  "type": "add" }, {  "albumId": 1,  "id": 8,  "title": "aut porro officiis laborum odit ea laudantium corporis",  "url": "https://via.placeholder.com/600/54176f",  "thumbnailUrl": "https://via.placeholder.com/150/54176f",  "type": "add" }, {  "albumId": 1,  "id": 9,  "title": "qui eius qui autem sed",  "url": "https://via.placeholder.com/600/51aa97",  "thumbnailUrl": "https://via.placeholder.com/150/51aa97",  "type": "add" }, {  "albumId": 1,  "id": 10,  "title": "beatae et provident et ut vel",  "url": "https://via.placeholder.com/600/810b14",  "thumbnailUrl": "https://via.placeholder.com/150/810b14",  "type": "add" }, {  "albumId": 1,  "id": 11,  "title": "nihil at amet non hic quia qui",  "url": "https://via.placeholder.com/600/1ee8a4",  "thumbnailUrl": "https://via.placeholder.com/150/1ee8a4",  "type": "add" }, {  "albumId": 1,  "id": 12,  "title": "mollitia soluta ut rerum eos aliquam consequatur perspiciatis maiores",  "url": "https://via.placeholder.com/600/66b7d2",  "thumbnailUrl": "https://via.placeholder.com/150/66b7d2",  "type": "add" }, {  "albumId": 1,  "id": 13,  "title": "repudiandae iusto deleniti rerum",  "url": "https://via.placeholder.com/600/197d29",  "thumbnailUrl": "https://via.placeholder.com/150/197d29",  "type": "add" }, {  "albumId": 1,  "id": 14,  "title": "est necessitatibus architecto ut laborum",  "url": "https://via.placeholder.com/600/61a65",  "thumbnailUrl": "https://via.placeholder.com/150/61a65",  "type": "add" }, {  "albumId": 1,  "id": 15,  "title": "harum dicta similique quis dolore earum ex qui",  "url": "https://via.placeholder.com/600/f9cee5",  "thumbnailUrl": "https://via.placeholder.com/150/f9cee5",  "type": "add" }, ];  

затем на стороне HTML установите условие и добавьте одну строку для кнопки удалить

 lt;div class="row" style=" padding: 10px;"gt;lt;button class="btn btn-primary" *ngIf="a.type == 'add'" (click)="onclick(a)"gt;Addlt;/buttongt;lt;/divgt; lt;div class="row" style=" padding: 10px;"gt;lt;button class="btn btn-primary" *ngIf="a.type == 'delete'" (click)="onclick(a)"gt;Removelt;/buttongt;lt;/divgt;