* ngFor для JSON массива

Question

У меня есть следующее JSON struct

{
"first_name": "Peter",
"surname": "Parker",
"adresses": {
    "adress": [{
        "info1": "intern",
        "info2": "bla1"
    }, {
        "info1": "extern",
        "info2": "bla2"
    }, {
        "info1": "group",
        "info2": "bla3"
    }, {
        "info1": "outdoor",
        "info2": "bla4"
    }, {
        "info1": "indoor",
        "info2": "bla5"
    }]
}}

Q: Как я могу сделать * ngFor для всех адресов?

Заранее спасибо и с уважением Filout

Answer 1

вы можете сделать это следующим образом

в файле TS

this.adressList= data.adresses.adress

в файле html

<div *ngFor="let adress of adressList">
   {{adress.info1}}
</div>

Answer 2

делайте так.

в вашем файле component.ts

data = {
    "first_name": "Peter",
    "surname": "Parker",
    "adresses": {
        "adress": [{
            "info1": "intern",
            "info2": "bla1"
        }, {
            "info1": "extern",
            "info2": "bla2"
        }, {
            "info1": "group",
            "info2": "bla3"
        }, {
            "info1": "outdoor",
            "info2": "bla4"
        }, {
            "info1": "indoor",
            "info2": "bla5"
        }]
    }
  }
  address = this.data.adresses.adress

в html

<div *ngFor="let value of address">
  {{value.info1}} - {{value.info2}}
</div>

дайте мне знать, если у вас есть какие-либо сомнения.

Answer 3

Я прочитал это, но я не понимаю решение. Я попробовал следующее в ".ts":

constructor(...) {
    this.formGroup = this.fb.group(...)
    this.formGroup.addControl('addresses', this.fb.group({
        address: new FormArray([])
    }))

Это работает для меня. Тогда у меня есть другая функция, подобная этой:

public get objControl(): FormArray {
        return this.formGroup.controls.addresses.controls.address as FormArray
    }

Если я установил точку останова в конструкторе, я смогу увидеть this.formGroup.controls.addresses.controls.address со значениями, но моя IDE (Webstorm) говорит, что «свойства» controls не существует для типа 'AbstractControl' "

Почему это?

Answer 4

Спасибо за ваш быстрый ответ. Но что означает ERROR TypeError: this.form._updateTreeValidity не является функцией в следующем коде?

<div *ngFor="let address of addressList">
    <div [formGroup]="address">
      <input formControlName="info1">
    </div>
</div>