小编Joe*_*lot的帖子

HTML:

<div *ngFor="let record of lift" class="list-lifts" [class.showLifts]="isBtnActive">

零件:

isBtnActive: boolean = false;

toggleClass() {
    this.isBtnActive = !this.isBtnActive;
  }

CSS:

.list-lifts {

  &:not(:first-of-type) {
    margin-top: -11px !important;
    display: none;
  }
}

.showLifts {
  display: block !important;
}

// I need something like this to be built in the view:
.ValueshowLifts {}

该toggleClass()功能.showLifts在单击按钮时切换CSS类.这非常有效.

问题是,我需要类.showLifts具有动态名称,我不确定生成它的语法是什么.出于逻辑原因,这是一个例子:

[class.{{ record.name }}showLifts]="isBtnActive"

但当然这不是有效的语法.

Ang2 组件：

import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import Chart from 'chart.js'

@Component({
  selector: 'app-prchart',
  templateUrl: './app-prchart.component.html',
  styleUrls: ['./app-prchart.component.css']
})
export class AppPRChartComponent implements OnInit {
  userEmail: any;
  email: string;
  uid: any;
  records = [];
  newRecords = [];
  filteredRecords = [];
  labels = [];

  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true,
    legend: {
        display: false
     }
  };
  public barChartColors: any [] =[
    {
        backgroundColor:'rgba(30, 136, 229, 1)'
    }
  ];

  public …

我正在使用这个结构:

[
   [
      {
         "comments":"asd",
         "movement":"Back Squat",
         "userID":"wDHZv3OL55SIymHkhMUejNleNkx1",
         "weight":"330"
      }
   ],
   [
      {
         "comments":"asd",
         "movement":"Bench Press",
         "userID":"wDHZv3OL55SIymHkhMUejNleNkx1",
         "weight":"100"
      }
   ],
   [
      {
         "comments":"Comment",
         "movement":"Clean",
         "userID":"wDHZv3OL55SIymHkhMUejNleNkx1",
         "weight":"195"
      }
   ],
   [

   ],
   [

   ],
   [
      {
         "comments":"Front squat comment alpha",
         "movement":"Front Squat",
         "userID":"wDHZv3OL55SIymHkhMUejNleNkx1",
         "weight":"315"
      }
   ],
   [

   ],
   [

   ],
   [

   ],
   [

   ],
   [

   ],
   [
      {
         "comments":"abc",
         "movement":"Strict Press",
         "userID":"wDHZv3OL55SIymHkhMUejNleNkx1",
         "weight":"155"
      }
   ]
]

这是我以JSON格式使用的输入.如您所见,有多个空数组.

我将如何过滤这些数组并删除空数组？

// Register form validation
  $('.register-form')
  .form({
    on: 'blur',
    fields: {
      registerEmail: {
        identifier  : 'registerEmail',
        rules: [{
            type   : 'email',
            prompt : 'Please enter a valid email address.'
        }]
      },
      registerPassword: {
        identifier  : 'registerPassword',
        rules: [{
            type   : 'empty',
            prompt : 'Please enter a password.'
        }]
      },
      registerPasswordVerify: {
        identifier  : 'registerPasswordVerify',
        rules: [{
            type   : 'match[registerPassword]',
            prompt : 'Your passwords do not match.'
        }]
      }
    },
    onSuccess: function() {
      $scope.createUser();
      console.log("Passed");
    },
    onFailure: function() {
      console.log("Failed");
    }
  }); …

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

import { User } from '../account.interface';
import { AF } from '../angularfire.service';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.less']
})
export class AccountComponent implements OnInit {
  public error: any;
  user: FormGroup;
  onSubmit() {
    console.log(this.user.value, this.user.valid);
  }

  currentUserDetails = [];
  firstName: string = '';
  lastName: string = '';
  email: string = '';
  phone: string = '';
  bio: string = '';
  userID: string = '';

  constructor(private afService: …

HTML

<li class="nav-item">
  <a class="nav-link" routerLink="/register" *ngIf="isLoggedIn">Register</a>
</li>

JS:

var auth = this.af.auth.subscribe( (user) => {
      if (user) {
        // User signed in!
        var uid = user;
        var isLoggedIn = true;
        console.log(uid)
        console.log(isLoggedIn);
      } else {
        // User logged out
        console.log("no user")
        var isLoggedIn = false;
        console.log(isLoggedIn);
      }
    });

控制台正确记录true和false值,因此var isLoggedIn正确更改,但*ngIf无论如何都保持隐藏状态.

成分：

export class AccountComponent implements OnInit {
  public error: any;
  currentUser = {};

  constructor(private afService: AF) {
    afService.getCurrentUserInfo().then(currentUserDetails => {
      this.currentUser = currentUserDetails;
    });
  }

  updateUserEntry(fname, lname, phone, bio) {

    this.afService.getCurrentUserInfo().then((user) => {
      let details = [];
      details.push(user);
      console.log(details[0].userID);
      this.afService.updateUserEntry(details[0].userID, fname, lname, phone, bio).then(() => {
        console.log("Updated entry");
      })
      .catch((error) => {
        this.error = error;
        console.log("error");
      });
    });
  }

  ngOnInit() {
  }

}

形式：

<form>
        <dl class="form-group">
          <dt><label>First Name</label></dt>
          <dd><input [(ngModel)]="currentUser.firstName" name="fname" class="form-control" type="text"></dd>
        </dl>

        <dl class="form-group">
          <dt><label>Last Name</label></dt>
          <dd><input …