Как я могу изменить содержимое и войти в консоль в angular?

Question

Я использую сервисы в angular и извлекаю данные из URL: http://jsonplaceholder.typicode.com/posts И отображаю их в браузере в виде таблицы. Затем я хочу выполнить операцию обновления содержимого таким образом, чтобы мои записи [] обновлялись и отображались в консоли. Есть идеи, как это сделать?

Мой post.component.ts

import { PostsService } from './../posts.service';
import { Component, OnInit } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {

  posts: any[];

  constructor( private service : PostsService ) { 

    this.service.getPosts().subscribe(response => {
  this.posts = response;
})
  }

  ngOnInit(): void {
  }

}

posts.component. html

    <table *ngFor="let post of posts" >
<tr><td>{{post.title}}</td>
<td>{{post.id}}</td>
<td>{{post.body}}</td></tr>
    </table>

Answer 1

на html может быть кнопка, которая вызывает метод обновления и обновляет данные переданной строки и затем отображает на консоли.

Это достаточно просто. Добавьте кнопку в html:

<table *ngFor="let post of posts" >
<tr><td>{{post.title}}</td>
<td>{{post.id}}</td>
<td>{{post.body}}</td></tr>
    </table>
<button (click)="updateData()">Update</button>

в файле ts, добавьте функцию:

public updateData(): void {
  this.posts.forEach(post => {
    post.body = "New custom body for each post";
  });

  console.log(this.posts);
}

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

РЕДАКТИРОВАТЬ: Как, когда я нажимаю на кнопку обновления, соответствующая строка должна стать редактируемой, и после редактирования она должна обновить исходные сообщения [], соответствующие этой записи, и отобразить на консоли

Мне пришла в голову эта идея: https://codesandbox.io/s/cool-shadow-sksf9

Обычно вы добавляете пользовательское свойство в posts и устанавливаете его по умолчанию false:

interface Post {
  id: number;
  body: string;
  inEdit?: boolean;
}

posts: Post[] = [
    {
      id: 1,
      body: "body 1",
      inEdit: false
    },
    {
      id: 2,
      body: "body 2",
      inEdit: false
    },
    {
      id: 3,
      body: "body 3",
      inEdit: false
    },
    {
      id: 4,
      body: "body 4",
      inEdit: false
    }
  ];

Чтобы добавить собственное свойство при получении данных из API, вы можете сделайте это:

public getData(): void {
  this.yourService.getData()
    .subscribe((response: Post[]) => {
      this.posts = response.map(post => {
        post.inEdit = false;
      };
    });
}

Затем измените html, чтобы использовать input только при редактировании строки (после нажатия кнопки):

<table *ngFor="let post of posts; let i = index">
  <tr>
    <ng-container *ngIf="!post.inEdit">
      <td>{{post.id}}</td>
      <td class="long-body">
        {{post.body}}
      </td>
      <button (click)="post.inEdit = !post.inEdit">
        Edit me
      </button>
    </ng-container>
    <ng-container *ngIf="post.inEdit">
      <td>{{post.id}}</td>
      <td>
        <input type="text" #bodyValue [value]="post.body" />
      </td>
      <button *ngIf="post.inEdit" (click)="updateRow(i, bodyValue.value)">
        Save changes
      </button>
    </ng-container>
  </tr>
</table>

Наконец, функция updateRow:

public updateRow(index: number, newBody: string): void {
    this.posts[index].body = newBody;
    this.posts[index].inEdit = false;

    console.table(this.posts[index]);
  }

Вот маленький css, который я использовал для того, чтобы текст редактировался, а не редактировался с одинаковой шириной:

table {
  margin-bottom: 10px;
}

.long-body,
input {
  width: 150px;
  background-color: #cdcdcd;
}