Данные не отображаются (*ngIf, *ngFor),

Question

Моя проблема в том, что данные не отображаются. Я включил картинку, чтобы уточнить, что я имею в виду. Если я использую эту ссылку id = "nosqldbs" [routerLink]=" ['./nosqldbs'] тогда я получаю данные. Если я использую эту ссылку id = "nosqland" [routerLink]=" ['./nosqland'] или же id = "nosqldbsand" [routerLink]=" ['./nosqldbsand'] тогда я не получаю данные.

Я не знаю, что не так с кодом.

Или можно использовать несколько *ngIf-модули в компоненте

<div *ngIf="nosqldb"> </div>

<div *ngIf="nosqldbAnd"> </div>

<div *ngIf="nosqldbOrAnd"> </div>

Таким образом, только один из этих трех данных отображаются? (nosqldb или же nosqldbAnd или же nosqldbOrAnd)

app.components.ts

 <li class="active">
     <a  id = "nosqldbs" [routerLink]=" ['./nosqldbs'] " data-toggle="tab">Nosqldb</a> 
 </li>

 <li class="active">
     <a  id = "nosqland" [routerLink]=" ['./nosqland'] " data-toggle="tab">Nosqland</a> 
 </li>
 <li class="active">
     <a  id = "nosqldbsand" [routerLink]=" ['./nosqldbsand'] " data-toggle="tab">Nosqldbsand</a> 
 </li>

nosqlDataDbAnd.html

<div class="row">

  <div *ngFor="let item of nosqlDbAnd" class="panel panel-info" [routerLink]="['/nosqland', item.key]">
  <!--  <div *ngFor="let item of nosqlDbAnd" class="panel panel-info" [routerLink]="['/nosqldbs', item.key]">-->
      <div class="panel-heading">
        <h3 class="panel-title">{{ item.name }}</h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <br>
          <div>
            Info: {{ item.info }}, <br>
            Year of release: {{ item.release_year}},<br>
            API: {{ item.api_language}}<br>
          </div>

        </div>
      </div>
    </div>
   </div>
 <div>

nosqlDataDBAnd.ts

@Component({

    selector: 'nosqland',
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    templateUrl:'./nosqlDataDbAnd.html'
})

export class NoSqlAndComponent implements OnInit, OnChanges {


    public nosqlDbsAnd: Array<model.NoSqlDB>;

    public nosqldb: model.NoSqlDB;
    public title = 'NosqlDBDataAnd';
    @Input() nosqlDbAnd: Array<model.NoSqlDB>;

    @ViewChild(NoSqlDbAndSelectionComponent) andselection: NoSqlDbAndSelectionComponent;

nosqlDataDbAnd-selection.ts

export class NoSqlDbAndSelectionComponent {
    public nosqlAnd: Array<model.NoSqlDB>;
    public nosqldbsAnd: model.NoSqlDB;
    public title = 'NosqlDBAndSelection';

@Input() nosqlDbAnd: Array<model.NoSqlDB>;

  ngOnInit() {

        this.route.params
            .subscribe((params: Params) => {
                db.NoSqlDB.load(params['id'])
                    .then(nosqldband => {
                        return this.nosqldbsAnd = nosqldband;
                    })
})
}
  ngOnChanges() {}

}

nosql.component.ts

import { NoSqlAndComponent } from './nosqlDataDbAnd';
import { NoSqlDbAndSelectionComponent } from './nosqlDataDbAnd-selection';
import { NoSqlOrAndComponent } from './nosqlDataDbOrAnd';
import { NoSqlDbOrAndSelectionComponent } from './nosqlDataDbOrAnd-selection';

…
@Component({
    selector: `nosql-app`,

   templateUrl: './nosql.component.html'
})
@ViewChild(NoSqlAndComponent) sqlAndComponent: NoSqlAndComponent;
@ViewChild(NoSqlOrAndComponent) sqlOrAndComponent: NoSqlOrAndComponent;

ngOnInit(){
let value: any;
let value1: any;
Submit(){
this.nosqlDbsAnd = value;
this.nosqlDbsOrAnd = value1; 
}
}

nosql.component.html

 <div>
            <!-- child component -->


            <nosqland [nosqlDbAnd]=nosqlDbsAnd></nosqland>
            <router-outlet></router-outlet>
   </div>

  <div>
            <!-- child component -->


            <nosqlorand [nosqlDbOrAnd]=nosqlDbsOr></nosqlorand>
            <router-outlet></router-outlet>
   </div>

nosqlDBData-selection.ts

export class NoSqlDbSelectionComponent {
    public nosqlDbs: Array<model.NoSqlDB>;
    public nosqldb: model.NoSqlDB;
    public title = 'NosqlDBDataSelection';

ngOnInit() {

        this.route.params
            .subscribe((params: Params) => {

                db.NoSqlDB.load(params['id'])

                    .then(nosqlDb => this.nosqldb = nosqlDb)
});
}

nosqlDBData-section.html

<div *ngIf="nosqldb">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">{{ nosqldb.name }}</h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <br>
          <div>
            <span>Info: </span> {{ nosqldb.info }}, <br>

            <span>Developer: </span>{{ nosqldb.developer}}, <br>
         </div>
        </div> 
      </div>
    </div>
  </div>