Отображение и ввод значений в строках в реактивных формах Angular 4

"this.orders" является результатом API ниже. Моя проблема в том, как я могу получить material.name под material_purchase_orders и отредактировать только его количество. Ваше решение верное. Я просто не могу отредактировать это имя материала и его количество.

ts

 this.route.paramMap
   .switchMap((params: ParamMap) => 
      this.purchaseOrderService.getOrder(+params.get('id')))
        .subscribe(
          (order:any) => {
            this.orders = order;
            console.log(order);
            this.loading = false;
         },
         error => {
            console.log(error);
            this.loading = false;
          }) 

      };




this.myForm = this.fb.group({
      rows: this.fb.array([])
  })

initGroup() {
    let rows = this.myForm.get('rows') as FormArray;
    rows.push(this.fb.group({
      prod_id: [null, Validators.required],
      quantity: [null, Validators.required],
    }))
  }

JSON

{
  "id": 11,
  "reference": "pek567",
  "supplier_id": 1,
  "user_id": 1,
  "project_id": 5,
  "total": 100,
  "transaction_date": "2017-10-08",
  "created_at": "2017-10-31 13:10:44",
  "updated_at": "2017-10-31 13:10:44",
  "user": {
    "id": 1,
    "name": "John",
    "email": "[email protected]",
    "created_at": "2017-10-26 07:32:53",
    "updated_at": "2017-10-26 11:58:44"
  },
  "supplier": {
    "id": 1,
    "name": "Not Available",
    "address": "Not Available",
    "city": "Not Available",
    "contact_number": "Not Available",
    "created_at": "2017-10-26 16:12:22",
    "updated_at": "2017-10-26 16:12:22"
  },
  "material_purchase_orders": [
    {
      "id": 11,
      "material_id": 49,
      "purchase_order_id": 11,
      "quantity": 1,
      "unit": "pcs",
      "price": 100,
      "created_at": "2017-10-31 13:10:44",
      "updated_at": "2017-10-31 13:10:44",
      "material": {
        "id": 49,
        "sku": "D16789",
        "name": "Door",
        "created_at": "2017-10-26 03:33:06",
        "updated_at": "2017-10-26 03:33:06"
      }
    }
  ],
  "user_name": "John"
}

person Joseph    schedule 06.11.2017    source источник
comment
Как выглядит твой ТС? Как выглядят ваши данные?   -  person AJT82    schedule 06.11.2017
comment
@AJT_82. Пожалуйста, проверьте обновленный код выше. Мои данные - это просто набор продуктов. Он должен быть на *ngFor в ‹t›r, но я не могу повторить два *ngFor в ‹tr›. Итак, я поместил продукты *ngFor в «выбор», но это не то, что я хочу. Он должен быть на ‹tr›   -  person Joseph    schedule 07.11.2017
comment
@AJT_82. Я также добавил изображение того, что я хочу появиться. Там вы можете увидеть списки названий продуктов. Списки названий продуктов исходят из пусть продукта продуктов. Количество также соответствует итерации продуктов, но вы можете редактировать его в строках.   -  person Joseph    schedule 07.11.2017


Ответы (1)


Поскольку ваши данные выглядят так:

obj = {material_purchase_orders: [{material: {id: 1, name: 'material1'}, quantity:2}, ..]}

// call this when you have your data
this.patchValues();

// this is where you store your data from api
productsFromApi = [];

patchValues() {
  let rows = this.myForm.get('rows') as FormArray;
  this.obj.material_purchase_orders.forEach(material => {
    rows.push(this.fb.group({material_name: material.material.name, quantity: material.quantity}))
  })
}

Затем вы просто удаляете итерацию products из своего представления и вместо этого отображаете значения из формата:

<tbody>
  <tr *ngFor="let row of myForm.controls.rows.controls; let i = index" [formGroupName]="i">
    <td>{{row.value.material_name}}</td>
    <td><input type="number" class="col-md-6" formControlName="quantity"></td>
  </tr>
</tbody>

DEMO

person AJT82    schedule 07.11.2017
comment
Спасибо. Но вот как я могу получить данные из материалов. *ngFor=пустой материал из orders.material_purchase_orders {{material.material.name}}. Можете ли вы помочь мне показать это? - person Joseph; 07.11.2017
comment
а что такое заказы? В вашем коде такого нет. Вот почему я спросил, как выглядят ваши данные. - person AJT82; 07.11.2017
comment
Извините, @AJT_82. Это всего лишь пример кода. Я добавил второе изображение выше моего API. заказы — это первый Объект на моей картинке. Там вы можете найти внутри него material_purchase_orders. - person Joseph; 07.11.2017
comment
Да, имя материала внутри material_purchase_orders - person Joseph; 07.11.2017
comment
Пожалуйста, проверьте мой обновленный ответ. Кроме того, если кто-то попросит ваши данные, скопируйте и вставьте JSON вместо добавления изображения. Если кто-то захочет отладить ваш код и создать демонстрацию, JSON можно легко скопировать. Теперь мне пришлось написать свой собственный ответ (надеюсь, я правильно понял! :) - person AJT82; 07.11.2017
comment
Я сожалею об этом. У меня все еще есть проблема. У меня есть this.route.paramMap .switchMap((params: ParamMap) =› this.purchaseOrderService.getOrder(+params.get('id'))) .subscribe( (order:any) =› { this.orders = order ; console.log(order); this.loading = false; }, error =› { alert(ERROR); console.log(error); this.loading = false; }) }; - person Joseph; 07.11.2017
comment
И material_purchase_orders находится под this.orders - person Joseph; 07.11.2017
comment
Я добавил route.params в приведенном выше коде, отредактированном - person Joseph; 07.11.2017
comment
Пожалуйста, разветвите мой Stackblitz и продемонстрируйте проблему, с которой вы сейчас столкнулись. Помогите мне помочь вам :) - person AJT82; 07.11.2017
comment
Я просто обновлю JSON и свой код выше. Подожди - person Joseph; 07.11.2017
comment
Пожалуйста, просто возьмите stackblitz, разветвите его и сделайте демонстрацию того, что происходит в вашем коде прямо сейчас. У меня нет времени, чтобы маршрутизация и другие вещи работали в демо, и это не совсем моя работа ;) Как я уже сказал, помогите мне помочь вам :) - person AJT82; 07.11.2017
comment
Я отредактировал свой вопрос и обновил файл JSON. Извините, что не разветвил ваш stackblitz. Надеюсь, вы понимаете. Большое спасибо, сэр - person Joseph; 07.11.2017
comment
Так в чем именно проблема сейчас? Вы упомянули что-то о параметрах маршрута, есть ли там проблема? Если да, то какую ошибку вы получаете? - person AJT82; 07.11.2017
comment
В route.params нет ошибок. Я только что упомянул об этом, потому что это результат this.orders. У this.orders есть ответ API. Можете ли вы проверить мой отредактированный вопрос выше. Я объяснил понятнее :) - person Joseph; 07.11.2017
comment
Я не понимаю, в чем проблема, это просто изменение имени obj, которое у меня есть в демо, вместо этого на orders? stackblitz.com/edit/angular-t94syl?file=app% 2Fapp.component.ts - person AJT82; 07.11.2017
comment
Это асинхронная проблема, убедитесь, что вы вызываете patchValues() из обратного вызова (order:any) => { this.orders = order; this.patchValues(); }, - person AJT82; 07.11.2017
comment
Я просто поместил this.patchValues() внутрь ngOninit(). Теперь работает. Большое спасибо за время и усилия. Очень ценил. Да благословит вас Бог, сэр - person Joseph; 07.11.2017
comment
НАМНОГО безопаснее вызывать его внутри обратного вызова, что, если ваш запрос занимает 5 секунд до того, как this.orders получит данные, вы получите ту же ошибку при наличии метода в OnInit. Имея его внутри обратного вызова (подписки), данные обязательно будут в this.offers. Но вы очень рады, рад, что мы поняли это! - person AJT82; 07.11.2017
comment
Можете ли вы помочь с этим вопросом? stackoverflow.com/questions/47171155 /. Спасибо - person Joseph; 08.11.2017