将同级值发布到API时出现问题（Angular 5）

Question

我正在开发学校管理系统。

我有一个从网络服务中获取的部门列表，每个部门列表旁边都有一个添加按钮，如果我想在所选部门中添加成绩，问题是当我单击任何添加按钮时，它总是添加在内部第一师。

例如：如果我单击第三分区旁边的添加按钮，它将在第一分区内发布。

我希望将新成绩发布到所选部门中进行添加。

我试图为除法按钮指定divide.id的值，当我单击“检查”时，该id会显示，但它并未发布到Web服务，始终给我未定义的内容，或仅发布了第一个除法ID。

我的组件HTML：

<div class="col-md-12 " *ngFor="let division of divisionList, let i = index">
    <form #create='ngForm'>
        <button *ngIf="division" class="choose-list arrow-onclick1" data-toggle="collapse" data-target="#list1" id="getId" name="division_id"
                [(ngModel)]="division.id" value="{{division.id}}">
            {{division.name}}
            <i class="fa fa-arrow-right pull-right arrow-down-onclick1" aria-hidden="true" style="margin-top: 12px"></i>
        </button>
        <!--Modal -->
        <div class="modal fade" id="exampleModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Enter grade name...</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="text" name="name" ngModel #name="ngModel" placeholder="Name...">
                        <!--<input type="text" name="division_id" placeholder="{{division.id}}" 
                        value="{{division.id}}" #division_id="ngModel" ngModel  >-->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
                        </button>
                        <button type="button" class="btn btn-primary"
                                (click)="createGrade(create)">Create grade
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

我的组件TS：

division_id: number[] = [];

createGrade(form: NgForm){
    this.division_id = $(this).closest('#getId').val();
    let data = form.value;
    let formData: FormData = new FormData();
    formData.append('grades[0][name]', data.name);
    formData.append('grades[0][division_id]', this.division_id);
    this.http.post(this.url, formData)
        .subscribe(response => {
            console.log(response);
        }, (err: HttpErrorResponse) => {
            console.log(err);
        });
}

屏幕截图可能会有所帮助：

分区视图（等级是里面的虚拟文字）

链接到除法API（POST）。 链接到除法API（GET）。

如果尚不清楚，请告诉我，因为该项目对我来说非常重要，因此我需要解决此问题。

Answer 1

在“创建成绩”按钮上，使用以下命令：

<button type="button" class="btn btn-primary"
        (click)="createGrade(create, division.id)">Create grade
</button>

即从模板局部变量传递division.id ，如此处所示：

<button ... [(ngModel)]="division.id" value="{{division.id}}">

然后在createGrade处理程序中，将其作为第二个参数接收并使用：

createGrade(form: NgForm, divisionId: number){
    let data = form.value;
    let formData: FormData = new FormData();
    formData.append('grades[0][name]', data.name);
    formData.append('grades[0][division_id]', divisionId);

    ...
}