Попытка привязать текущее значение в * ngFor к глобальной переменной - PullRequest
Новая
       1

Попытка привязать текущее значение в * ngFor к глобальной переменной

0 голосов
/ 06 июня 2018

Что касается заголовка, я пытаюсь привязать текущее значение в цикле к переменной компонента, чтобы затем я мог передать его в другую функцию при нажатии кнопки вне пользовательского интерфейса цикла.(По сути, у меня есть меню вне цикла, которое может выполнять функции.)

Я пробовал несколько разных способов, последнее из которых (изменение) для установки переменной, но, похоже, она не работает.

Просмотр кода компонента 

<ion-slides pager="false">
    <ion-slide *ngFor="let year of years | async; let i = index; let first = first; let last = last;" value="year" (change)="currentYear = years[i]">
    <ion-row>
        <ion-col>
            <ion-icon *ngIf="!first" name="arrow-back" (tap)="slidePrev(i)"></ion-icon>

                Year {{ year.year }}

            <ion-icon *ngIf="!last" name="arrow-forward" (tap)="slideNext(i)"></ion-icon>
        </ion-col>
     </ion-row>
     <ion-row>
         <ion-col>
             <div *ngIf="year.semesters.length === 0">
                 <p>Looks like you haven't added a semester yet</p>
                 <button (tap)="addSemester(year)">
                   <ion-icon name="add-circle"></ion-icon>
                 </button>
             </div>
             <div *ngIf="year.semesters.length > 0">

             <ion-segment [(ngModel)]="selectedSemester">
                 <ion-segment-button *ngFor="let sem of year.semesters" value="{{ sem.yearId + '_' + sem.semester }}">
                     Semester {{ sem.semester }}
                 </ion-segment-button>
                 <ion-segment-button (click)="addSemester(year)" *ngIf="year.semesters.length < 4">
                     Add Semester
                 </ion-segment-button>
             </ion-segment>

                </div>
            </ion-col>
        </ion-row>
    </ion-slide>
</ion-slides>

Код компонента 

currentYear: any;

this.years = this.gradesProvider.getYears(this.userId).snapshotChanges()
      .map(years => {
        return years.map(year => {
          const data = year.payload.doc.data();
          const id = year.payload.doc.id;
          return this.gradesProvider.getSemesters(id).valueChanges()
            .map(semesters => Object.assign({}, {id, ...data, semesters}));

        });
      }).mergeMap(observables => combineLatest(observables))

Другие функции 

slideNext() {
    this.slides.lockSwipes(false);
    this.selectedSemester = null;
    this.slides.slideNext();
    this.slides.lockSwipes(true);
  }

  slidePrev() {
    this.slides.lockSwipes(false);
    this.selectedSemester = null;
    this.slides.slidePrev();
    this.slides.lockSwipes(true);
  }

1 Ответ

0 голосов
/ 06 июня 2018

Вы можете установить значение инициализации currentYear, используя оператор do() для наблюдаемого. 

currentYear: any;

this.years = this.gradesProvider.getYears(this.userId).snapshotChanges()
  .map(years => {
    return years.map(year => {
      const data = year.payload.doc.data();
      const id = year.payload.doc.id;
      return this.gradesProvider.getSemesters(id).valueChanges()
        .map(semesters => Object.assign({}, {id, ...data, semesters}));

    });
  })
  .mergeMap(observables => combineLatest(observables))
  .do((years)=> {
      if(!this.currentYear) {
         this.currentYear = years[0];
      }
  });

Это назначит первый элемент currentYear только один раз.После этого вы можете изменить значение currentYear, когда пользователь нажимает кнопку.

Возможно, вы захотите использовать <div *ngIf="currentYear"> в своем шаблоне, где код зависит от переменной currentYear, чтобы иметь значение, потому что ономожет не иметь значения сразу.

...