Адаптер рисунка в угловом виде с использованием машинописи для реактивной формы

Question

Я ищу решение о том, как использовать шаблон адаптера в angular6.Я прочитал множество статей или учебных пособий, но не смог понять концепцию этого.Пожалуйста, поделитесь некоторыми соображениями по этому вопросу.Короче говоря, я использую сервис для извлечения некоторых данных, мне нужно использовать это в компоненте, но модель, используемая в компоненте, отличается от модели сервиса.Мне нужно отредактировать его и отправить обратно в сервис в намеченном формате.Суть моего сомнения в том, нужно ли нам создавать интерфейс для обработки http-вызовов?Если да, как мы храним данные и используем их в моем классе адаптера.Поскольку ссылки, на которые я ссылался, сторонники делят модели данных и представления моделей раздельно, я запутался.

Ниже приведен json, возвращенный с сервера (assets / mocks / quote.json)

{
    "quote": {
        "quoteId": 123,
        "commenseDate": "12/ 15/2018",
        "quoteType": "Small",
        "count": 10,
        "customerInfo": {
            "customerName": "ABC",
            "address": "xxxx xxx xxx",
            "city": "Philadelphia",
            "state": "Philadelphia ",
            "zip": "xxxxx",
            "county": "PA",
            "phone": "",
            "eligibles": 2,
            "employeeCount": 2
        }

    }
}

Я запутался в использовании модели и интерфейса при подключении к веб-сервису.После обращения к угловым документам я осознаю, что нам нужно использовать интерфейс нашей модели данных и использовать этот тип при подключении к веб-сервису.Итак, я создал интерфейс для обработки моей модели данных

export interface Quote{
    quoteId: number;
    commenseDate: string;
    count: number;
    quoteType: string;
    customerInfo: CustomerInfo
}
export interface CustomerInfo {
    customerName: string;
    address: string;
    city: string;
    state: string;
    zip: number;
    county: string;
    phone: number;
    eligibles: number;
    employeeCount: number;
}

. При вызове службы я использовал этот интерфейс. Ниже приведен файл quote-search-service.ts

export class QuoteSearchListService {

/* ApiService- is just a wrapper class to hold the http logic. This class imports HttpClient and uses its get
  * and post methods
*/
  constructor(private apiService:ApiService) { }

  /** Get a quote item */
  getQuoteItem(quoteId:number):Observable<Quote>{

    return this.apiService.get<Quote>('assets/mocks/quote.json')
    .pipe(map((data) => data));
  }
}

Iиспользуйте реактивную форму в моем компоненте, и я использую модель формы, показанную ниже

export class QuoteComponent implements OnInit {

    private form: FormGroup;

    constructor(private router: Router, private fb: FormBuilder, private quoteService: QuoteSearchListService) {
        this.form = this.fb.group({
            customerName: [null, Validators.required]
            address: this.fb.group({
                `enter code here`
                address1: ['', Validators.required],
                address2: ['']
            })
            addressDetails: this.fb.group({
                state: [null, Validators.required],
                city: [null, Validators.required],
                zip: [null, Validators.required]
            }),
            county: [''],
            phone: ['', [Validators.required, Validators.minLength(10)]],

            contact: this.fb.group({
                contactFirstName: [null, Validators.required],
                contactLastName: [null, Validators.required],
            }),
            eligibles: [null, Validators.required],
            empCount: [null, Validators.required],
            fteCount: [null, Validators.required]
        })

    }

    ngOnInit() {
        this.getQuoteItem(this.quoteId);
    }

    getQuoteItem() {
        this.quoteService.getQuoteItem(quoteId).subscribe(response => {
            this.form.setValue(response.quote);
        })
    }

}

Мои вопросы перечислены ниже:

1. Как использовать шаблон адаптера в этом контексте, чтобы моймодель данных и модель формы будут независимы друг от друга?
2. Нужно ли создавать модели / классы для использования в моем компоненте, отличном от модели формы.Смотрите, например, 'addressDetails' в модели формы отличается от модели данных.
3. Как будет преобразование из модели данных в модель формы (для вызова get) и наоборот (для вызова post / put) бывает.Должен ли я написать дополнительную услугу для преобразования этой модели туда и обратно?

Ссылки, на которые я ссылался: https://itnext.io/dont-clone-back-end-models-in-angular-f7a749bdc1b0

https://blog.florimondmanca.com/consuming-apis-in-angular-the-model-adapter-pattern

Когдаиспользуйте интерфейс и модель в TypeScript / Angular2

Answer 1

На мой взгляд, в общем, форма-модель и модель данных - это разные вещи.Таким образом, вам нужно преобразовать форму-модель в модель данных и наоборот.

Где?Если это «простая» и общая ценность, мне нравится использовать в сервисе.например, мы получаем дату в формате String и хотим иметь в качестве объекта Date или получили строковый тип "London | Madrid", и вы хотите преобразовать в массив

service.getList().pipe(map(list=>{
   list.forEach(item=>
      {
        item.date=new Date(item.date); //now "date" is a Date Object
        item.cities=item.cities.split('|');  //now cities is an array of Strings
   }))

. Итак, наши saveData в службе становятсякак

saveData(data)
{
     data.date=data.date.getFullYear()+"-"+
            ("0"+(data.date.getMonth()+1)).slice(-2)+"-"+
            "0"+(data.date.getDate()).slice(-2)
     data.cities=data.cities.join("|");
     this.httpClient.post("....",data)
}

Если это сложнее, я бы предпочел сделать в компоненте

Answer 2

В Javascript нет печатания.Ваши переменные динамически вводятся, когда им присваивается значение или когда над ними выполняется операция.

В Typescript у вас есть возможность вводить переменные.Но после компиляции типы удаляются.Они здесь для того, чтобы обеспечить некоторую предварительную компиляцию поведения и помочь вам с intellisense.

Но ответить вам:

1 - модель формы должна зависеть от модели данных.Если вы хотите редактировать информацию и отправлять ее обратно, она должна иметь одинаковую структуру.

Для этого у вас есть две опции: управляемая шаблоном (которая зависит от вашей модели) и реактивная (которая зависит от реализации, которую вы делаете).В вашем случае вы должны использовать шаблонный подход.

2 - Если отправленная полезная нагрузка не отличается от полученной полезной нагрузки (в зависимости от модели), то у вас не должно быть разных моделей.Поэтому нет, вы не должны создавать классы или интерфейсы, специфичные для формы.

3 - Он должен быть прозрачным, вам не нужно ничего делать.