Question

我有3个下拉列表，主要，次要，三元类别相互依赖，最初我有3个下拉列表，下面是一个按钮“添加更多”，单击“添加更多”后，再次出现下拉列表下面以前有，现在的问题是第一行下拉选择功能正常，单击“添加更多”后，第二行下拉选择功能不起作用，这意味着它将第二个类别的已选择第一行的值更改为三元类别。首先，我都会加载所有主要类别，基于主要ID，我将获取次要类别，基于次要类别ID，我将获取三元类别。拜托我了。

HTML代码

                <div class="row Space_2">
                        <div class="col-md-4">
                                <select class="Textfield_2" id="primary_category_id"  formControlName="primary_category_id" (change)="getSecondCategory($event.target.value)" name="primaryServices" required>
                                    <option value="">Primary Service</option>
                                    <option *ngFor="let primaryCat of primaryCategory" [value]="primaryCat.id">{{primaryCat.name}}</option>

                                </select>
                        </div>

                        <div class="col-md-4">
                            <select class="Textfield_2" id="secondary_category_id" formControlName="secondary_category_id" (change)="getTernaryCategory($event.target.value)" name="secondaryServices" required>
                                    <option value="">Secondary Service</option>
                                    <option *ngFor="let secondCat of secondCategory" [value]="secondCat.id">{{secondCat.name}}</option>
                                </select>
                        </div>
                        <div class="col-md-4">
                            <select class="Textfield_2" id="ternary_category_id"  formControlName="ternary_category_id" name="secondaryServices" required>
                                    <option value="">Ternary Service</option>
                                    <option *ngFor="let ternaryCat of ternaryCategory" [value]="ternaryCat.id">{{ternaryCat?.name}}</option>
                                </select>
                        </div>
                    </div>
                    <div *ngFor="let k of addmoreServices let i = index">
                    <div class="row Space_2">
                        <div class="col-md-4">
                                <select class="Textfield_2" id="primary_category"   (change)="getSecondCategory($event.target.value)" name="{{k.primary_category}}" required>
                                    <option value="">Primary Service</option>
                                    <option *ngFor="let a of primaryCategory" [value]="a.id">{{a?.name}}</option>

                                </select>
                        </div>

                        <div class="col-md-4">
                            <select class="Textfield_2" id="secondary_category" (change)="getTernaryCategory($event.target.value)"  name="{{k.secondary_category}}" required>
                                    <option value="">Secondary Service</option>
                                    <option *ngFor="let b of secondCategory" [value]="b.id">{{b?.name}}</option>
                                </select>
                        </div>
                        <div class="col-md-4">
                            <select class="Textfield_2" id="secondary_category" (change)="getTerId($event.target.value)" name="{{k.ternary_category}}" required>
                                    <option value="">Ternary Service</option>
                                    <option *ngFor="let c of ternaryCategory" [value]="c.id">{{c?.name}}</option>
                                </select>
                        </div>
                    </div>
                </div>

TypeScript代码：

      getPrimaryCategory() {

     this.http.get('http://localhost:3000/api/getPrimaryCategory' ,{

         })
           .subscribe(
             res => {

               this.primaryCategory = res['data'];
               console.log(this.primaryCategory);


           },
             err => {
             }
           );
     }

     getSecondCategory(id,i) {
       this.primcatId = id;
       this.http.get('http://localhost:3000/api/getsecondarycatdataforternary/'+id ,{

            })
              .subscribe(
                res => {

                  this.secondCategory = res['data'];
                  console.log(this.secondCategory);


              },
                err => {
                }
              );
        }

        getTernaryCategory(id) {
          console.log("The ternary ID is",id);
          this.secondId = id;
          this.http.get('http://localhost:3000/api/getternaryCatforServices/'+id ,{

               })
                 .subscribe(
                   res => {

                     this.ternaryCategory = res['data'];
                     console.log(this.ternaryCategory);


                 },
                   err => {
                   }
                 );
           }

getTerId(id){
  this.terid = id;
  console.log("THE TERNARY ID IS",this.terid);
}
  addMoreServices() {
this.addmoreServices.push({ primary_category:this.primcatId , secondary_category:this.secondId  ,ternary_category: this.terid });
console.log("the add more services",this.addmoreServices);
  }

Answer 1

您需要将trackBy添加到*ngFor指令中。您可以按id进行跟踪，谢谢您，此Angular在刷新后不会将值视为新值。

动态行创建会影响其他已创建的下拉值，角度为6

1 个答案: