Непонимание использования переменных шаблона в инструкции * ngIf

# – это ссылочная переменная шаблона. Он зависит от элемента DOM и не может использоваться таким образом.

Директива ng-init существует в AngularJS и служит для этой цели, но ее нет в Angular, прежде всего потому, что ею можно злоупотреблять. Его можно воссоздать, как показано в этом ответе.

Обходной путь — использовать структурную директиву. Типичным обходным решением для значения truethy является структурная директива ngIf:

<ng-container *ngIf="3; let n">
  <div *ngIf="(i+1) % n === 0">
    ...

Это не сработает, если значение равно falsy, потому что вложенный компонент не будет скомпилирован. Более универсальным обходным решением, которое поддерживает ложные значения, является пользовательская структурная директива ngVar, как описано здесь.

Для таких же новичков, как я, вот что я сделал на данный момент с советом JB... Спасибо, JB. И я надеюсь, что это поможет кому-то еще.

всего несколько изменений...

шаблон:

<div class="row">
        <input #myInput (change)="changeColumnNumber(myInput.value)" type="number">
</div>

составная часть:

  n = 4;

Полный контекст:

шаблон:

    <div class="row">
        <input #myInput (change)="changeColumnNumber(myInput.value)" type="number">
</div>

<div class="row">
    <div class="col-3">
        <product-filter [category]="category"></product-filter>
    </div>

    <div class="col">
        <div class="row"
            *ngIf="cart$ | async as cart">
            <ng-container *ngFor="let p of filteredProducts; let i = index">
                <div class="col">
                    <product-card [product]="p"
                        [cart]="cart"></product-card>
                </div>
                <div *ngIf="(i+1) % n === 0"
                    class="w-100"></div>
            </ng-container>
        </div>
    </div>
</div>

составная часть:

import { Cart } from './../models/cart';
import { CartService } from './../cart.service';
import { Product } from './../models/product';
import { ProductService } from './../product.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/switchMap';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  products: Product[] = [];
  filteredProducts: Product[] = [];
  category: string; // keep this field in this class in order to initialize it... then delegate it out
  cart$: Observable<Cart>;
  n = 4;


  constructor(
    private route: ActivatedRoute,
    private productService: ProductService,
    private cartService: CartService,

  ) {}

  async ngOnInit() {
    this.cart$ = await this.cartService.getCart();
    this.populateProducts();
  }

  private populateProducts() {
    this.productService
      .getAll()
      .switchMap(products => {
        this.products = products;
        return this.route.queryParamMap;
      })
      .subscribe(params => {
        this.category = params.get('category'); // initializing category field
        this.applyFilter();
      });
  }

  private applyFilter() {
    // setting the filtered products array
    this.filteredProducts = this.category
      ? this.products.filter(p => p.category === this.category)
      : this.products;
  }

  changeColumnNumber(value) {
    console.log(value);
    this.n = value;
    console.log(this.n);
  }
}