Angular 7从服务器端json动态生成单选按钮

我试图根据服务器端调用的结果动态生成单选按钮

我的服务如下所示：

 getCancelReasons():  Observable<CancelReason> {
    const href =  environment.apiUrl + 'api/v1/CancelReason/ListActive';
    const requestUrl =
        `${href}`;
             return this.http.get<CancelReason>(requestUrl, {
              headers: {'Token': 'token'}
            });
  }

我的Component.ts看起来像这样

    export class CancelReason {
        cancelReasonId: number;
        description: string;
        active: boolean;
        deleted: boolean;
    }

export class CancelContractComponent implements OnInit {
    isLoadingCancelReasons: boolean;
    cancelReasonList: CancelReason[];


    constructor(private data: DataService) {
    }

    ngOnInit() {
        this.loadCancelReasons();
    }


    loadCancelReasons() {
        this.isLoadingCancelReasons = true;
        this.data.getCancelReasons().subscribe(
        (data) => {
            this.cancelReasonList = data;
            this.isLoadingCancelReasons = false;
        },
        (error) => {
            this.isLoadingCancelReasons = false;
        }
        );
    }
}

<div *ngFor="let cancelReason of cancelReasonList; let i = index">
        <input type="radio">
    <label>{{ cancelReason[i].name }}</label>
    </div>

[
  {
    "cancelReasonId": 1,
    "description": "A.10 Bill Date",
    "active": true,
    "deleted": false
  },
  {
    "cancelReasonId": 2,
    "description": "A.11 Bill Frequency",
    "active": true,
    "deleted": false
  },
 ...
]

我的component.html如下所示

    export class CancelReason {
        cancelReasonId: number;
        description: string;
        active: boolean;
        deleted: boolean;
    }

export class CancelContractComponent implements OnInit {
    isLoadingCancelReasons: boolean;
    cancelReasonList: CancelReason[];


    constructor(private data: DataService) {
    }

    ngOnInit() {
        this.loadCancelReasons();
    }


    loadCancelReasons() {
        this.isLoadingCancelReasons = true;
        this.data.getCancelReasons().subscribe(
        (data) => {
            this.cancelReasonList = data;
            this.isLoadingCancelReasons = false;
        },
        (error) => {
            this.isLoadingCancelReasons = false;
        }
        );
    }
}

<div *ngFor="let cancelReason of cancelReasonList; let i = index">
        <input type="radio">
    <label>{{ cancelReason[i].name }}</label>
    </div>

[
  {
    "cancelReasonId": 1,
    "description": "A.10 Bill Date",
    "active": true,
    "deleted": false
  },
  {
    "cancelReasonId": 2,
    "description": "A.11 Bill Frequency",
    "active": true,
    "deleted": false
  },
 ...
]

我看到一个单选按钮列表，但没有文本和值

---

我认为您希望显示

说明

而不是

名称

，因为它不存在于您的变量中

<div *ngFor="let cancelReason of cancelReasonList; let i = index">
  <input type="radio">
  <label>{{ cancelReason.description }}</label>
</div>

{{cancelReason.description}}

我认为您希望显示

说明

而不是

名称

，因为它不存在于您的变量中

<div *ngFor="let cancelReason of cancelReasonList; let i = index">
  <input type="radio">
  <label>{{ cancelReason.description }}</label>
</div>

{{cancelReason.description}}

要从服务器生成动态表单，请使用库，它非常简单，而且工作做得很好，下面是一个

---

您还可以阅读以实现自己的动态表单逻辑。

要从服务器生成动态表单，请使用库，它非常简单，而且工作做得非常好，下面是一个

---

您还可以阅读以实现自己的动态表单逻辑。

cancelReason[i]。name

我没有看到名为

name

的属性。你的意思是描述吗？另外，您没有看到值，因为您没有绑定值。@ug我的意思是描述。如何绑定该值？

cancelReason[I]。name

我没有看到名为

name

的属性。你的意思是描述吗？另外，您没有看到值，因为您没有绑定值。@ug我的意思是描述。如何绑定该值？