Question

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

下面是我的js代码片段。如果用户是管理员，则 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 就会显示出来。为什么在加载页面时它不能正常显示？

由于

Answer 1

尝试将span * ngIf更改为div。我简单的检查可能是将span中的内容临时更改为静态文本ex：hello。你能看到你好吗？如果是，那么它是一个标记问题

Answer 2

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
         });
    });
}

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

2 个答案: