Нужна помощь в передаче пользовательских данных для динамического изменения форм - PullRequest
Новая
       5

Нужна помощь в передаче пользовательских данных для динамического изменения форм

0 голосов
/ 23 декабря 2018

Angular Issue: я пытаюсь получить значение выпадающего списка пользователя, чтобы динамически заполнить следующий выпадающий список и показать им только те опции, которые должны быть возвращены на основе их исходного выбора.У меня есть функция, которая принимает значение события $, попадает в мой JSON-файл и затем возвращает правильные строки для заполнения следующего выпадающего списка, но единственное, что отображается, - это пустой выпадающий список.

Я бросил фиктивный HTML-код для проверки NgIf и знаю, как он работает, а также значения, возвращаемые из моей функции, после того, как они вошли в консоль.Я действительно в растерянности, потому что если нет чего-то, чего я не знаю об угловых закулисных событиях, я просто смогу подключить значения из моей функции к NgFor и выбросить вновь созданные опции для второго выпадающего списка

post.component.ts: 

export class PostComponent implements OnInit {
  rForm: FormGroup;
  title: String;
  description: String;
  category: String;
  subCategory: String;
  item: String;
  deathDate: Date;
  claimedBy: String;
  specifics: String;
  selections = postOptions;
  currentOptions: String[]
  showSecond: boolean = false
  showThird:boolean= false
  currentName:String


  toggleCategory(event) {


    this.showSecond = true
    let selectedTitle = (event.target.value);
    this.currentName = event.target.getAttribute('name')
    this.currentOptions = this.displaySubcategory(selectedTitle, 
    this.currentName);

  }

  displaySubcategory(str: any, dataToDisplay: String) {
      let childData = {
        index: 0,
        options: [],
      };

      for (let i = 0; i <= this.selections.length; i++) {
        if (str === this.selections[i].department) {
          childData.index = i;
          for 
            (let j = 0; j < this.selections[i].children.length; j++) 
             {
              childData.options.push
              (this.selections[i][`${dataToDisplay}`][j].title)
             }
        }
     return childData.options;
   }
}

post.component.html: 

  <div class="panel-body">
    <div class="dropdown">
      <select class="form-control" id="category" 
      (change)="toggleCategory($event)" 
      [(ngModel)]="this.category" name="children">

        <option>scenery</option>
        <option>electrical</option>
        <option>material</option>
        <option>etc</option>

      </select>
    </div>

    <div *ngIf="this.showSecond">
      <div class="dropdown">
        <select class="form-control" id="category 
         (change)="toggleCategory($event)" 
         [(ngModel)]="currentOptions" name="item">
          <div *ngFor="let item of items">
            <option>{{item}}</option>
          </div>
        </select>
      </div>
    </div>

Ожидаемые результаты записываются на консоль и сохраняются как this.currentOptions, условные срабатывания NgIfи следующий выпадающий рендеринг, но затем, кажется, ничего не передается в раскрывающемся списке.Нужно ли устанавливать что-то асинхронно?NgFor срабатывает на событии или когда DOM рендерится?

1 Ответ

0 голосов
/ 23 декабря 2018

Не заворачивайте <option> в div.Это должно быть <ng-container>

    <select class="form-control" id="category 
     (change)="toggleCategory($event)" 
     [(ngModel)]="currentOptions" name="item">
      <ng-container *ngFor="let item of items">
        <option>{{item}}</option>
      </ng-container>
    </select>
...