Question

我的视图模型似乎没有使用route params observable进行更新。

My Component看起来像这样：

import { Component, OnInit, Input, Output, OnDestroy } from '@angular/core';
import { RSSService} from '../rss.service';
import { RegionService } from '../region.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: '[rss-list]',
  templateUrl: './rss.component.html',
  styleUrls: ['./rss.component.css'],
  providers: [RSSService]
})
export class RssComponent  implements OnInit, OnDestroy {
  private _region: Object;
  subscription;

  @Input() rssItems: any[];

  constructor( 
    private region: RegionService, 
    private rss: RSSService, 
    private _route: ActivatedRoute, 
    private _router: Router
    ) {  }

  ngOnInit() {
    this.subscription = this._route.params.subscribe(params => {
      this._region = this.region.getRegion(params["region"]);
      this.rssItems = this.rss.getRss(this._region);
      this.rssItems.forEach((item)=> item.checked = false);
      console.log ('rss model',this.rssItems); // model is updating here
    })

  }

  ngOnDestroy(){
    console.log ('Destroy', this._route);
    this.subscription.unsubscribe();
  }
}

我的观点：

<tr *ngFor="let item of rssItems" >
<td><input type="checkbox" [disabled]="item.deleted" ([ngModel])="item.checked"></td>
<td>
    <div [class.deleted]="item.deleted">{{item.title}}</div>
    <div [class.deleted]="item.deleted"><a href="{{item.url}}">{{item.url}} </a></div>
</td>
<td>
    <i (click)="rssDelete(item)" *ngIf="!item.deleted" class="glyphicon glyphicon-trash"></i>
    <i (click)="rssEdit(item)" *ngIf="!item.deleted" class="glyphicon glyphicon-pencil"></i>
    <i (click)="rssUndelete(item)" *ngIf=" item.deleted " class="glyphicon glyphicon-modal-window "></i>
</td>
</tr>

console.log显示rssItems模型正在更新但视图永远不会更改。任何帮助将不胜感激。这对我来说有点新鲜。

感谢。

Answer 1

尝试查看ngOnChanges rssitems是@Input，因此每次更改ngOnChanges都应该被调用：

function layout(divName){
var hiddenVal = document.getElementById("tempDivName");
if(hiddenVal.Value != undefined){
    var oldDiv = document.getElementById(hiddenVal.Value); 
    oldDiv.style.display = 'none'; 
}

var tempDiv = document.getElementById(divName); 
tempDiv.style.display = 'block';              

hiddenVal.Value = document.getElementById(divName).getAttribute("class");}

Answer 2

rssItems必须是Observable才能使用| async

Angular 2 - 使用route observable

2 个答案: