0

我正在使用 angular 2 形式在我的应用程序中填充和编辑信息。当涉及到后端数据模式的图像时，它看起来像这样：

media {
       featured: "Url string", <!-- designated default image -->
       other: {
               img1: "Url string", <!-- secondary images -->
               img2: "Url string",
               img3: "Url string",
               img4: "Url string",
               img5: "Url string",
               img6: "Url string"
              }
      }

但是现在它已更改为如下所示：

media: [
    {
       thumbs: {
                 default: "Url string",
               }
       primary: boolean, <!-- whether or not image is the default image -->
       type: string,
       raw: "Url string of image"
    {

]

我当前的 form.ts 处理图像是这样的：

 let featured = '';
 let img1 = '';
 let img2 = '';
 let img3 = '';
 let img4 = '';
 let img5 = '';
 let img6 = '';


  if (this.otherMode) {
  const pendingCards = this.pendingCardsComponent.getPendingCard(this.id);
  featured = pendingCards.media.featured;
  img1 = pendingCards.media.other.img1;
  img2 = pendingCards.media.other.img2;
  img3 = pendingCards.media.other.img3;
  img4 = pendingCards.media.other.img4;
  img5 = pendingCards.media.other.img5;
  img6 = pendingCards.media.other.img6;

  this.cardForm = new FormGroup({
  'title': new FormControl(cardTitle),
  'media': new FormGroup({
    'featured': new FormControl(featured, Validators.maxLength(300)),
    'other': new FormGroup({
      'img1': new FormControl(img1, Validators.maxLength(300)),
      'img2': new FormControl(img2, Validators.maxLength(300)),
      'img3': new FormControl(img3, Validators.maxLength(300)),
      'img4': new FormControl(img4, Validators.maxLength(300)),
      'img5': new FormControl(img5, Validators.maxLength(300)),
      'img6': new FormControl(img6, Validators.maxLength(300)),
    }),
  }),

    private storeCardUrl = 'httpURL';

 onSubmit(value: string){
  let formData:Card = this.cardForm.value;
  // let formData: Card[] = this.cardForm.value;
  let body = JSON.stringify(formData);
  let headers = new Headers({'Content-Type': 'application/json'});
  return this.http.post(this.storeCardUrl, body, {headers: headers})
    .map((response: Response) =>  response.json())
    .subscribe(data => console.log(data))
    // console.log(formData);
 }

处理图像渲染和编辑的 form.html 部分如下所示：

 <div formGroupName="media">
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group">
      <md-input-container class="mdcontainer">
        <input
          mdInput placeholder="Card Primary Image"
          type="text"
          id="featured"
          formControlName="featured"
          class="form-control"
          #featured>
      </md-input-container>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <img [src]="featured.value" class="img-responsive">
    </div>
  </div>
<!-- Secondary Images  -->
<div formGroupName="other">
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group">
      <md-input-container class="mdcontainer">
        <input
          mdInput placeholder="Secondary Image 1"
          type="text"
          id="img1"
          formControlName="img1"
          class="form-control"
          #img1>
      </md-input-container>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <img [src]="img1.value" class="img-responsive">
    </div>
  </div>

我不明白的是把 Media 当作一个数组来处理，它仍然可以被拉入我的 form.html 并能够显示我想要的图像。旧模型允许调用 img1/img2/etc。但是作为数组的新模型在包含 Url 和其他字段的对象之外没有任何对象。我知道我可以创建一个带有 formGroup 和一些 formControls 的 formArray 来获得正确的结构，但是能够在 html 上正确获取这些图像给我带来了麻烦。

任何帮助/建议/提示将不胜感激。

4

0 回答 0