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

Question

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

我的服务如下：

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

我的取消原因模型如下

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

我的Component.ts看起来像这样

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;
        }
        );
    }
}

我的component.html看起来像这样

<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
  },
 ...
]

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

Answer 1

我认为您想显示description而不是name，因为它不存在于您的变量中

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

Answer 2

要生成来自服务器的动态表单，请使用NG Dynamic Forms库，它非常简单并且可以很好地完成工作，这里是demo

您还可以阅读Angular Dynamic Form Guide来实现自己的动态表单逻辑。