Question

我在Angular2路由器中遇到问题。问题是路由器未检测到组件中的动态内容。

有一个主页只包含静态内容，之后我有一个产品页面，其中我使用ngFor指令动态显示存储为服务中的对象的所有产品。当我点击导航栏中的产品时，ngFor指令不起作用，它只显示页面中的静态内容（标题等）

当我双击导航栏中的“产品”页面时，它可以正常工作。

Bootstrap.ts：

＆＃13;

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./app.component"
import {ROUTER_PROVIDERS} from 'angular2/router';


bootstrap(AppComponent, [ROUTER_PROVIDERS]);

＆＃13;

根组件：

＆＃13;

import {Component} from 'angular2/core';
import {RouteConfig, RouterOutlet, RouterLink} from 'angular2/router';

import {Home} from './home.component';
import {Products} from './products.component';
import {SubmitPost} from './submitPost.component';
import {MyAccount} from './myaccount.component';
import {ProductList} from './productList.service';
import {AccountData} from './accountdata.service'
import {LoginVerification} from './loginverification.service'


@RouteConfig([
  {path: '/home', name: 'Home', component: Home, useAsDefault: true},
  {path: '/products', name: 'Products', component: Products},
  {path: '/submitad', name: 'SubmitAd', component: SubmitPost},
  {path: '/myaccount', name: 'MyAccount', component: MyAccount},
  {path: '/*other', name: 'Other', redirectTo: ['Home']}

])

@Component({
  selector: 'my-app',
  templateUrl: './app/app.component.html',
  styleUrls: ['./app/app.component.css'],
  directives: [RouterOutlet, RouterLink],
  providers: [ProductList, AccountData, LoginVerification]
})


export class AppComponent{
}

＆＃13;

产品组件：

＆＃13;

                    <div class="col-md-3" *ngFor = "#product of allProducts">
                        <div class="panel panel-default">
                            <div class="panel-body" >
                                <img [src]="product.imageUrl" alt="">                            
                                <h3><a (click)="showPost(product)" data-toggle="modal" data-target="#myModal">{{product.title}}</a></h3>
                                <p>Price: {{product.price}} Rs.</p>
                                <p>City: {{product.city}}, {{product.state}}</p>
                                <p>Category: {{product.category}}</p>
                                <p>Cell: {{product.cell}}</p>


                            </div>
                        </div>
                    </div>

＆＃13;

        <nav class="nav navbar-default navbar-fixed-top">

        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span> 
                </button>

                <a class="navbar-brand" href="#">SHOP19</a>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">                        
                <ul class="nav navbar-nav" id="navOpt">
                    <li><a [routerLink]="['Home']">Home</a></li>
                    <li><a [routerLink]="['Products']">Products</a></li>
                    <li><a [routerLink]="['SubmitAd']">Submit An Ad</a></li>
                    <li><a [routerLink]="['MyAccount']">My Account</a></li> 
                    <li><a href="#">Careers</a></li> 
                    <li><a href="#">Contact Us</a></li> 


                </ul>

                <div class="pull-right" id="search">
                    <i class="fa fa-search"></i>
                </div>            

            </div>
        </div>

    </nav>

<router-outlet></router-outlet>

Angular2路由器未检测到动态内容

0 个答案: