在 Spring Boot 和 Angular 中更改映射

Question

我正在尝试更改后端和前端（Spring Boot 和 Angular）中的映射，但没有对数据库进行任何更改，也没有更改变量。我找到了 Spring Boot 部分的解决方案，只需添加 @JsonProperty。不过，我不知道在 Angular 方面该做什么。那部分也有类似的解决方案吗？放在哪里？

这是我在 Spring Boot 中的代码的 sn-p，我希望这足以让我了解我正在尝试做什么。如有需要，我会添加更多。

@JsonProperty("document_name")
@Column(name = "name", nullable = false, length = 255)
private String name;

@JsonProperty("document_description")
@Column(name = "description", nullable = false, length = 255)
private String description;

使用@JsonProperty 使我能够更改变量名，而无需对代码进行任何实际更改。正如我所说，我需要对 Angular 做同样的事情。有什么建议吗？

编辑：这是我的 Angular 代码。我已经对文件进行了硬编码以使其正常工作，并且我知道这不是一个合适的解决方案。我想我需要将@JsonProperty 注释放在这里，但我显然犯了一些我不知道的错误。

import {HttpErrorResponse} from '@angular/common/http';
import {Component, DoCheck, OnInit} from '@angular/core';
import {Document} from './docu';
import {DocumentService} from './document.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit, DoCheck {
  public documentList: Document[];
  public add = false;
  public newDocument: any;
  public documentNameOld : any;
  public documentDescriptionOld : any;

  constructor(private documentService: DocumentService) {
    this.documentList = [];
  }

  ngOnInit() {
    this.getDocuments();
  }

  ngDoCheck() {
  }

  public getDocuments(): void {
    this.documentService.getAllDocuments().subscribe(
      (response: any) => {
        (<Document[]>response).forEach(docu => {
          const doc: Document = {
            id: docu.id,
            document_name: docu.document_name,
            document_description: docu.document_description,
            editable: false,
          };
          this.documentList.push(doc);
        });
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
  }

  addRow(): void {
    this.add = true;
    const id = Math.floor(Math.random() * 100)
    this.newDocument = {
      id: id,
      document_name: '',
      document_description: '',
      editable: false
    };
  }

  public addDocument(): void {
    if (this.newDocument.document_name === '') {
      alert('Please add name!');
      return;
    }
    if (this.newDocument.document_description === '') {
      alert('Description not added!');
      return;
    }

    this.documentService.createDocument(this.newDocument).subscribe(
      response => {
        console.log(response);
        this.documentList = [...this.documentList, response];
      },
      error => {
        console.log(error);
      }, () => {
        this.add = false;
      });
  }

  cancelAddingDocument(): void {
    this.add = false;
  }

  updateRow(document: Document): void {
    console.log(document);
    this.documentNameOld= document.document_name;
    this.documentDescriptionOld = document.document_description;
    document.editable = true;
  }

  updateDocument(document: Document): void {
    if(document.document_name === ''){
      alert("Please enter name!")
      return;
    }
    if(document.document_description === '') {
      alert("Please enter description!")
    return;
    }
    this.documentService.updateDocument(document).subscribe(
      response => {
        console.log(response)
      },
      error => {
        console.log(error)
      },
      () => {
        document.editable = false;
      }
    )
  }

  cancelUpdate(document: Document): void {
    document.document_name = this.documentNameOld;
    document.document_description = this.documentDescriptionOld;
    this.documentNameOld = '';
    this.documentDescriptionOld = '';
      document.editable = false;
  }

  deleteDocument(document: Document): void {
    this.documentService.deleteDocumentById(document.id).subscribe(
      response => {
        console.log(response)
      },
      error => {
        console.log(error)
      },
      () => {
        document.editable = false;
        const index = this.documentList.indexOf(document);
        this.documentList.splice(index, 1);
      }
    )
  }
}

Answer 1

@JsonProperty("document_name") 这个注解也可以在你的 typescript 类中使用。

我假设您的 Document 类类似于：

class Document {
    @JsonProperty("document_name")
    documentName: string; 
.....
.....
}

所以你可以这样使用它。 请同时参考此链接：https://cloudmark.github.io/Json-Mapping/