Angular 8 数据绑定停止更新答案

【问题标题】：Angular 8 data binding stopped working on updateAngular 8 数据绑定停止更新
【发布时间】：2020-02-01 02:35:09
【问题描述】：

我将我的项目更新为最新版本的 Angular（两者都在 v8 中），现在数据绑定已停止在视图中工作。

我已通过控制台确认属性正在更新，但模板没有。

我一直在研究这个，尝试了另一个升级但没有骰子。

打字稿：

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 会在每次运行这些函数中的任何一个时向 ul 添加一个 li。 Console.log 显示值被放置在属性中，但视图没有改变。

此外，当 go to than you 设置为 TRUE 时，将使用 app-thank-you-section 而不是 app-options-sections。但这也不起作用（但我已经验证值正在改变。）

【问题讨论】：

你在哪里声明和填充selectedOption？
抱歉，更新了上面的代码。我最初在 goToNextSection() 中将它声明为一个 var，但是当它停止工作时将它作为一个道具向上移动，认为这可能会有所进展。（这也是在编写 goToThankYou 函数之前。）

标签： angular data-binding

【解决方案1】：

您似乎声明了不正确的 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>

【讨论】：

感谢您的捕获，但仍然无法正常工作。我已将其更改为一个对象，甚至开始使用默认参数。如果我将 push() 添加到构造函数，它将显示默认参数，但不会在 goToNextSection() 中添加任何内容，即使在控制台中显示所有属性都已正确更新。跨度>
@anthony_ksand 你能在 stackblitz.com 上创建一个例子吗？
stackblitz.com/edit/angular-gdmz2q 我添加了相关文件的所有代码以及一些测试数据。正在进行一些 AJAX 调用以获取实际数据。
@anthony_ksand stackblitz.com/edit/angular-gdmz2q 你的 stackblitz 示例不起作用。有一个错误Error in /turbo_modules/@angular/compiler@8.0.0/bundles/compiler.umd.js (2479:21)。
@anthony_ks 只需创建一个可以重现错误的工作示例。此示例不应进行任何 API 查询。只需创建一个包含必要代码的简单数组，无需不必要的代码

【解决方案2】：

我能够通过将我的所有代码放入子模板并将其放置在父模板中并创造性地使用 ngIf 来解决此问题。正是我不想做的，但至少它现在正在工作。

【讨论】：