*ngIf 不像其他 *ngIf 那样工作答案

【问题标题】：*ngIf is not working like other *ngIf's*ngIf 不像其他 *ngIf 那样工作
【发布时间】：2018-01-12 20:25:35
【问题描述】：

我的 *ngIf 在一个特定变量 isAdmin 上遇到了一个奇怪的问题（这应该允许我在 userList 中显示用户列表）。我不确定为什么它的行为与同一组件中的所有其他 *ngIf 语句不同。

这是我的组件 js 代码的 sn-p。如果用户是管理员，这就是 isAdmin 从 false 切换为 true 的地方。

_initAutorun(): void {
 this.autorunComputation = Tracker.autorun(() => {
  this.zone.run(() => {
    this.usersList = Meteor.users.find({}).fetch(); //update the users list automatically
    this.currentUser = Meteor.user();  //update the current user automatically
    this.isLoggingIn = Meteor.loggingIn();
    this.isLoggedIn = !!Meteor.user();
    this.checkAndSub();
  });
 });
}

checkAndSub(){
 if(this.isLoggingIn){
  Meteor.call('checkAdmin', function(error, result) {
    if (error) {
      this.errors.push(error.reason || "call from server has an error");
    }
    this.isAdmin = result;
    console.log(this.isAdmin);
    if(this.isAdmin){
      Meteor.subscribe("userList");
    }
    else console.log("User is not admin");
  });
 }
}

这是对应的HTML

<span *ngIf="viewDetails">
  <div class="pizza_details" id="pizza_details" [ngClass]="{'show' : viewDetails, 'hide' : !viewDetails}">
    <div class="row">
      <!--PIZZA DESCRIPTION PANEL-->
      <div class="pizza_description col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="panel" id="description_panel">
          <div class="panel-body">


            <div>
            {{error}}{{message}}
            <span *ngIf="isAdmin"> 
            <p><h2>User List</h2></p>
            <ul>
            <li *ngFor="let iterate of usersList">
            _id: {{iterate._id}}
            <p>Emails: {{iterate.emails}}</p>
            <p>username: {{iterate.username}}</p>
            <p>isadmin: {{iterate.isAdmin}}</p>
            </li></ul>
            </span>
            </div>
            <h1>Description: </h1>
            {{currentPizza.description}}
            <p><button type="button" class="btn active" role="button" (click)="toggle()">Toggle</button></p>


          </div>
        </div>
      </div><!--&&&&pizza description collapes&&&&-->
      <!--STARTING THE "SECOND PANEL" FOR PICTURES, STYLE, VOTES, AND MODS-->
      <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
        <div class="row">
          <div class="pizza_picture col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="panel" id="picture_panel">
              <div class="panel-body" style="padding:0px;">
                <img src="{{currentPizza.imageUrl}}" class="img-rounded" style="max-height: 400px; width:100%;">
              </div>
            </div>
          </div><!--&&&&pizza picture collapse&&&&-->
        </div>
        <div class="row">
          <div class="pizza_style col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="panel" id="style_panel">
              <div class="panel-body">
                <h4>Style:</h4>{{currentPizza.style}}
                <h4>Location:</h4>
                <span *ngIf="currentPizza.location.state">
                {{currentPizza.location.state}} , 
                </span>
                {{currentPizza.location.country}}
                <h4>Brand: </h4>{{currentPizza.brand}}
              </div>
            </div>
          </div><!--&&&&pizza style collapse&&&&-->
          <div class="pizza_votes col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="panel" id="vote_panel">
              <div class="panel-body">
                <h3>Pizza Spectrum Score: </h3>
                  {{currentPizza.votes}}
              </div>
            </div>
          </div><!--&&&&pizza votes collapse&&&&-->
        </div>
        <div class="row">
          <div class="pizza_users col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="panel" id="user_panel">
              <div class="panel-body">
                <h3>SubmittedBy: </h3>
                {{submittedBy(currentPizza._id)}}
                <ul><li *ngFor="let i of currentPizza.userUpvotes">{{i}}
                </li>
                </ul>
                <p><button type="button" id="exit_details_btn" class="btn active" role="button" (click)="toggleDetails()">Exit Details</button>

                <button type="button" id="upvote_btn" class="btn active" role="button" (click)="upVote(currentPizza._id)">Upvote</button>
                <button type="button" id="downvote_btn" class="btn active" role="button" (click)="downVote(currentPizza._id)">Downvote</button></p>

                <button type="button" id="downvote_btn" class="btn active" role="button" (click)="cc()">publish all users</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </span>

我知道 isAdmin 是真的，但什么也没显示。如果我创建一个单独的按钮来切换它，那么我的 userLIst 就会出现。为什么页面加载后无法正常显示？

谢谢

【问题讨论】：

得到结果后这条日志语句会触发吗？控制台.log(this.isAdmin);如果确实如此并且没有发生更改检测，您可能需要从“@angular/core”导入 {ChangeDetectorRef}；在构造函数中放置 constructor(cdr: ChangeDetectorRef){this.cdr = cdr;} 然后将日志语句放置在 'this.cdrDetectchanges();'
是的，日志触发了。以后有机会我会试试的谢谢
isAdmin 是一个数组吗？
@Rahul 这不是一个数组
你应该（？）在this.admin里面失去this的范围：Meteor.call('checkAdmin', function(error, result) {，因为你使用的是function而不是胖箭头语法？或者我错过了什么：D

标签： javascript html angular meteor

【解决方案1】：

ngZOne.run 不标记组件以进行更改检测。它所做的只是在 Angular 错误处理程序中执行回调函数。

你需要注入ChangeDetechRef并调用markForCheck。

public constructor(private cdr: ChangeDetectorRef, private zone: NgZone) {
}

然后在别处：

_initAutorun(): void {
    this.autorunComputation = Tracker.autorun(() => {
         this.zone.run(() => {
             //.....
             this.checkAndSub();
             this.cdr.markForCheck(); // <--- mark component dirty
         });
    });
}

【讨论】：

这个解决方案似乎不起作用。我会在早上尝试使用 ChangeDetectorRef 类并报告我的发现。

【解决方案2】：

尝试将 span *ngIf 更改为 div。我的简单检查可能是将跨度中的内容临时更改为静态文本，例如：你好。然后你能看到你好吗？如果为真，那就是标记问题

【讨论】：