Привязка данных Angular 8 перестала работать при обновлении - PullRequest
Новая
       9

Привязка данных Angular 8 перестала работать при обновлении

1 голос
/ 02 октября 2019

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

Я подтвердил через консоль, что свойства обновляются, но шаблон не обновляется.

Я исследовал это, попробовал другое обновление, но без кубиков.

TypeScript: 

import { Component,OnInit, AfterViewInit } from '@angular/core';
import {ProductService} from './product.service';
import { UnserializeService } from './unserialize.service';
import { NgxSpinnerService } from 'ngx-spinner';
import { EnvService } from './env.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [ProductService]
})
export class AppComponent implements OnInit, AfterViewInit{
  selectionList:Array<any> = []; 
  showThankYou = false;

// View now shows this default getting added, but no other added values after page initialization
  selectedOption = {
    name: "test",
    section_index: 0
  } ;

goToNextSection(){
   //set the data the will be used in the sidebar
   this.selectedOption['name'] = this.currentUserSelection.product_name;
   this.selectedOption['section_index'] = this.sectionIndex;
   this.selectionList.push(  this.selectedOption );  
    }

  goToThankYou(){
    this.spinner.show();
    var selectedOption = [];
    //set the data the will be used in the sidebar
    this.selectedOption['name'] = this.currentUserSelection.product_name;
    this.selectedOption['section_index'] = this.sectionIndex;
    this.selectionList.push(this.selectedOption);
    this.showThankYou = true;
  }

HTML: 

<section id="side_menu" class="inline">
  <h2>Options</h2>
  <ul>
    <li *ngFor="let selection of selectionList" class="selected-list">
      {{selection.name}} 
      <a href="#" (click)="editSection(selection.section_index )">Edit</a>
    </li>
  </ul>
</section>

<section id="main_form" class="inline">

  <app-options-sections
  *ngIf="!showThankYou" >
  </app-options-sections>

  <app-thank-you-section
  *ngIf="showThankYou">
  </app-thank-you-section>

</section>

<ngx-spinner></ngx-spinner>

<router-outlet></router-outlet>

Я ожидаю, что selectionList будет добавлять li к ul при каждом запуске любой из этих функций. Console.log показывает, что значения помещаются в свойство, но представление не изменяется.

Кроме того, когда для перехода в значение, отличное от указанного вами, установлено значение TRUE, вместо разделов app-options-section будет использоваться раздел app-thank-you-section. Но это тоже не работает (но я проверил, что значения меняются.)

Ответы [ 2 ]

0 голосов
/ 07 октября 2019

Я смог решить эту проблему, взяв весь мой код в под-шаблоны и поместив его в родительский шаблон и творчески используя ngIf. Именно то, что я не хотел делать, но, по крайней мере, пока это работает.

0 голосов
/ 02 октября 2019

Похоже, вы объявили неверный тип selectedOption = [];. Это тип массива. Однако вам необходимо объявить его как объект: 

selectedOption = {};

, потому что в цикле вы хотите показать значение ключа: 

<li *ngFor="let selection of selectionList" class="selected-list">
  {{selection.name}}  <!-- here you are showing value of key `name` -->
  <a href="#" 
     (click)="editSection(selection.section_index )"><!-- here you are passing value of key `section_index` -->
     Edit
  </a>
</li>
...