Angular, отображает список несколько раз на одной и той же странице html, который обновляется каждый раунд от l oop до c# - PullRequest
Новая
       17

Angular, отображает список несколько раз на одной и той же странице html, который обновляется каждый раунд от l oop до c#

0 голосов
/ 12 июля 2020

Я хочу отображать список в качестве параметров в select, когда в каждом раунде в l oop список будет обновляться в соответствии с текущим div. Он работает с точки зрения концепции, но html обновляется только один раз в соответствии с последней записью в списке и не отображает отдельный список для каждого l oop вращение

my html

<div *ngFor="let item of listConstraint" [value]="item.id">
        <p>{{item.name_constraint}}</p>
        <select>
            <option *ngFor="let item1 of listConstraintDetails" [value]="item1.id">
                {{item1.name_constraint}}</option>
        </select>
    </div>

my ts 

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { AjaxRequestService } from 'src/app/services/Request/ajax-request.service';
import { ConstraintKind } from 'src/app/class/constraintKind';
import { ConstraintDetails } from 'src/app/class/constraint-details';

@Component({
  selector: 'app-constraints',
  templateUrl: './constraints.component.html',
  styleUrls: ['./constraints.component.css']
})
export class ConstraintsComponent implements OnInit {
  constraintForm: FormGroup;
  listConstraint: ConstraintKind[] = [];
  listConstraintDetails: ConstraintDetails[] = [];
  constructor(private http: AjaxRequestService, private httpClient: HttpClient, private route: Router) {

  }

  ngOnInit(): void {
    this.GetConstraintsKind();
  }
  GetConstraintsKind() {
    return this.http.GetConstraintsKind().subscribe(data => {
      this.listConstraint = data;
      data.forEach(element => {
        this.GetConstraintsDetails(element.id);
      })
      console.log(data);
    })
  }
  GetConstraintsDetails(constraintId) {
    return this.http.GetConstraintsDetails(constraintId).subscribe(data => {
      this.listConstraintDetails = data;
      console.log(data);
    })
  }
}

мои функции ajax сервис 

  GetConstraintsKind() {
    return this.http.get<any>('http://localhost:11818/Api/Constraint/getConstraintKind', { headers: this.header });
  }
  GetConstraintsDetails(constraintId: number) {
    return this.http.get<ConstraintDetails[]>('http://localhost:11818/Api/Constraint/GetConstraintsDetails/' + constraintId);
  }

сервер работает хорошо и отправляет правильные данные, но html отображает один и тот же список все время Большое спасибо за любую помощь

Ответы [ 2 ]

0 голосов
/ 13 июля 2020

мой html

  <div *ngFor="let item of listConstraint" [attr.data-value]="item.id">
            <p>{{item.name_constraint}}</p>
            <select *ngIf="constraintDetails[item.id]">
                <option *ngFor="let item1 of constraintDetails[item.id]" [value]="item1.id">
                    {{item1.name_constraint}}</option>
            </select>
        </div>

мой ts 

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { AjaxRequestService } from 'src/app/services/Request/ajax-request.service';
import { ConstraintKind } from 'src/app/class/constraintKind';
import { ConstraintDetails } from 'src/app/class/constraint-details';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-constraints',
  templateUrl: './constraints.component.html',
  styleUrls: ['./constraints.component.css']
})
export class ConstraintsComponent implements OnInit {
  constraintForm: FormGroup;
  listConstraint: ConstraintKind[] = [];
  listConstraintDetails: ConstraintDetails[] = [];
  constraintDetails = {};

  constructor(private http: AjaxRequestService, private httpClient: HttpClient, private route: Router) {

  }

  ngOnInit(): void {
    this.GetConstraintsKind();
  }
  GetConstraintsKind() {
    return this.http.GetConstraintsKind().subscribe(data => {
      this.listConstraint = data;
      for (let i = 0; i < this.listConstraint.length; i++) {
        const element = this.listConstraint[i].id;
        this.http.GetConstraintsDetails(element)
          .subscribe(cd => {
            this.constraintDetails[element] = cd;
            console.log(this.constraintDetails)
          });
      }
    })
  }

  GetConstraintsDetails(constraintId): ConstraintDetails[] {
    console.log(constraintId);
    let itemsarr: ConstraintDetails[] = [];

    if (!itemsarr) {
      this.http.GetConstraintsDetails(constraintId).subscribe(data => {
        itemsarr = data;
      })
    }
    return itemsarr;
  }

}
0 голосов
/ 12 июля 2020

Вы выполняете внутреннюю операцию l oop в ngOnInit внутри одного массива, который перезаписывает ранее выбранные данные в массиве listConstraintDetails .

Что вы желание может быть достигнуто, если вы немного измените свой код, например 

  ngOnInit(): void {
    this.GetConstraintsKind();
  }
  GetConstraintsKind() {
    return this.http.GetConstraintsKind().subscribe(data => {
      this.listConstraint = data;
    })
  }
  GetConstraintsDetails(constraintId):ConstraintDetails[]{
  let itemsarr: ConstraintDetails[] = [];

  if(constraintId)
  {
   this.http.GetConstraintsDetails(constraintId).subscribe(data => {
   itemsarr = data;
   })
  }
   return itemsarr;
  }

И ваш html будет изменен как 

<div *ngFor="let item of listConstraint" [value]="item.id">
        <p>{{item.name_constraint}}</p>
        <select>
            <option *ngFor="let item1 of GetConstraintsDetails(item.id)" [value]="item1.id">
                {{item1.name_constraint}}</option>
        </select>
    </div>

Спасибо.

...