小编Fra*_*ank的帖子
Bootstrap Navbar无法正常工作:AngularCLI
我将bootstrap包含在我的angularcli项目中,但是当我尝试包含导航栏时,没有任何元素正常工作.我正在使用网站上的标准boostrap导航栏示例,但它看起来很奇怪:
我的项目导致导航栏无法正确加载有什么问题？
navbar.component.html
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>.angular-cli.json
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],推荐指数
解决办法
查看次数
在div中动态加载组件 - Angular5
我能够成功创建一个按钮,在单击时将我的组件的另一个实例加载到DOM中,但是它将它加载到我希望它在其中的组件之外,这会导致CSS关闭.当我将"editorComponents"添加到我的页面时,它目前看起来像这样:
但我希望它看起来像这样:
您可以从检查中看到,在第二个示例中,所有标签都被手动移动到我想要的位置.
现在我的代码如下:
home.component.html
<div class="row backgroundContainer">
<div class="col-md-7 componentContainer">
<app-editor></app-editor>
<button (click)="addEditor()" type="button">Add Editor</button>
</div>
<div class="col-md-5 componentContainer">
<app-bible></app-bible>
</div>
<div id="footerBox">
<app-footer></app-footer>
</div>
</div>home.component.ts
import { Component, OnInit, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { EditorComponent } from '../editor/editor.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(private componentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef) {}
ngOnInit() {
}
addEditor() {
const factory = this.componentFactoryResolver.resolveComponentFactory(EditorComponent);
const ref = this.viewContainerRef.createComponent(factory);
ref.changeDetectorRef.detectChanges();
}
} …推荐指数
解决办法
查看次数
对于 Reactjs 和 React Native 应用程序，Google Firestore (NoSQL) 与 PostgreSQL (SQL)
我只是有一个问题，在创建 ReactJS 或 React Native 应用程序时如何选择使用 noSQL 数据库还是 sql 数据库？例如，为什么您会选择使用 Firestore 而不是 PostgreSQL，反之亦然？
特别是对我来说，如果我正在制作一款反应原生（移动）游戏，其中玩家每个人都有自己的包和库存，其中所有这些数据都存储在数据库中，我应该使用哪种方法，Firestore 还是 PostgreSQL？为什么？此外，我希望其他玩家能够查看彼此的包并对其进行评分。
推荐指数
解决办法
查看次数
Angular5:使用*ngFor迭代枚举
我正在尝试创建一种具有键值对的结构,其中键是'equals'之类的标识符,值是类似于'\ u003D'的unicode等效html.现在我正在使用枚举,但我不确定这是否是最好的结构.无论如何,我需要使用这个枚举(或其他结构)在页面的下拉列表中显示unicode字符,方法是使用ngFor语句迭代我的枚举并创建innerHtml与unicode字符对应的选项.做这个的最好方式是什么？
现在我的代码如下:
枚举
export enum Symbols {
equals = '\u003D'
}
component.ts
symbols: Symbols;
component.html
<select *ngFor="let symbol of symbols">
<option value="and">{{symbol}}</option>
</select>
推荐指数
解决办法
查看次数
标签 统计
angular ×3
angular-cli ×1
components ×1
enums ×1
ngfor ×1
nosql ×1
postgresql ×1
sql ×1
typescript ×1
view ×1