我正在使用angualr 2。
我正在尝试打印html div。
这是我的代码
<div id="print-section">
// Html code
</div>
<button (click)="open()">print</button>
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
这是我的open（）
open(){
//I called Api using service
let scope=this;
setTimeout(function() { scope.print(); }, 3000);
}
但是我得到这个错误
错误TypeError：无法读取null的属性“文档”。
我该如何解决这个问题？
我有一个 angular 4 的前端，一个 ASP.NET Core WebAPI 的后端，它们的功能是，将数据和一个人的简历发送到一个 SQL Server 数据库，但是......总是捕获数据并将文件发送到数据库的方法的 IFormFile 为空。
我已经尝试了在互联网上找到的所有类型的解决方案，但没有一个对我有用。
作为 Post 方法的响应，我收到此异常
An unhandled exception occurred while processing the request.
NullReferenceException: Object reference not set to an instance of an object.
WebApplication.Controllers.CandidateController+<Post>d__4.MoveNext() in CandidateController.cs, line 60
在这里，我粘贴了执行此操作的项目的部分代码。
HTML
<form class="col-md-6 offset-md-3" method="POST" enctype="multipart/form-data" #form="ngForm" (ngSubmit)="onSubmit(form)">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Nome completo" id="name" name="name" ngModel />
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">Email</label> …在我正在开发的应用程序中，对于桌面和移动，它完全需要两个不同的视图。使用CSS不可能，因为内容完全不同。
我做了什么？
我已经在Routing file使用代码检查过它是否是台式机/手机const isMobile = window.innerWidth < 768;
并在路径组件中： component: isMobile ? MobileComponent : DesktopComponent
这在开发环境中运行良好。但是，尽管生产构建失败了ng serve --prod（显然是Angular 5）
问题：
完全没有错误，根据对isMobile/错，它应该加载MobileComponent / DesktopComponent。但是即使isMobile为true / false，也不会加载
始终在桌面和移动设备中加载MobileComponent。而isMobile价值是越来越计算正确，true对Mobile和false对Desktop
我认为原因是路由在发送给客户端之前已经得到了编译。
解决方法已尝试但不起作用：
在计算isMobile并给出该变量（组件）而不是路由文件中的三元运算时，使用了if..else条件
任何方式：
有什么方法可以用来实现相同的功能？
提前致谢
我正在使用 TypeScript 学习 Angular JS。我有 Angular JS 的经验。但当它与 TypeScript 集成时，对我来说是全新的。我现在正在为我的应用程序配置路由。
\n\nThis is my app.module.ts file\nimport { BrowserModule } from \'@angular/platform-browser\';\nimport { NgModule } from \'@angular/core\';\nimport { FormsModule } from \'@angular/forms\';\nimport { HttpModule } from \'@angular/http\';\n\nimport { AppComponent } from \'./app.component\';\nimport { HomeComponent } from \'./home/home.component\';\nimport { DirectoryComponent } from \'./directory/directory.component\';\n//import { AppRoutingModule } from \'./app-routing.module\';\n\n\n\nimport { RouterModule, Routes } from \'@angular/router\';\n\n\n\nconst routes: Routes = [\n{\n path: \'\',\n component: HomeComponent\n},\n{\n path : \'directory\',\n component : DirectoryComponent\n}\n];\n\n\n\n@NgModule({\n declarations: [\n AppComponent,\n HomeComponent,\n …我有一个使用段的离子应用程序，并且在一个段上我想显示谷歌地图。当我们首先加载这个段时它可以工作，但是当我转到另一个段并且我想回到谷歌地图段时，我收到一条错误消息。我不知道如何解决这个问题。
类型错误：无法读取未定义的属性“nativeElement”
HTML
<ion-header>
<ion-toolbar>
<ion-segment [(ngModel)]="gps" color="light">
<ion-segment-button value="information" (click)="onInformationClick()">
<ion-icon name="information-circle"></ion-icon>
</ion-segment-button>
<ion-segment-button value="navigate" (click)="onNavigateClick()">
<ion-icon name="navigate"></ion-icon>
</ion-segment-button>
<ion-segment-button value="settings" (click)="onSettingsClick()">
<ion-icon name="settings"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content class="home">
<div [ngSwitch]="gps" id="contenu">
<div *ngSwitchCase="'information'"><h1>information</h1></div>
<div #map id="map" *ngSwitchCase="'navigate'"></div>
<div *ngSwitchCase="'settings'"><h1>settings</h1></div>
</div>
</ion-content>
打字稿
import { Component ,ViewChild, ElementRef} from '@angular/core';
import { NavController, Platform} from 'ionic-angular';
import { AndroidPermissions } from '@ionic-native/android-permissions';
declare var SMS:any;
declare var google:any;
@Component({
selector: 'page-informations',
templateUrl: 'informations.html'
})
export class InformationsPage { …是否可以在.scss为该组件定义的文件内访问组件变量？
例如：
example.component.ts
@Component({
selector: 'example-selector',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css']
})
export class ExampleComponent {
@Input() size: number;
}
example.component.scss
.some-class {
width: calc(100% - {{ size }};
}
如果没有，如何解决？
谢谢。
更新：当我意识到 PrimeNg 有一个 quill 实现并且我已经在使用 PrimeNg 时，我放弃了。一开始无法正常工作，但升级到 angular 7 和 ngrx 7 beta 修复了问题。https://www.primefaces.org/primeng/#/editor
我正在尝试使用比默认工具栏更完整的工具栏在我的项目中设置 ngx-quill 文本编辑器。我只是从文档中复制了这个代码片段并且还没有调整（还没有！）。
如果我不包含 modules 属性，我不会收到任何浏览器错误，但我想知道是否存在仅在我尝试添加时才显示的导入问题？
说明.html
<quill-editor modules="editorOptions"></quill-editor>
说明.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as Quill from 'quill';
@Component({
selector: 'instructions',
templateUrl: '../admin/instructions.html'
})
export class Instructions {
public editorOptions = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ …我有一个第三方库，打算与RxJS集成。这是一个称为Tiger Text的消息传递库。根据他们的说法，我可以听一个称为消息的事件，当流中有消息时，我可以使用它来进一步利用它。相同的代码段如下：
var client = new TigerConnect.Client({ defaultOrganizationId: 'some-org-id' })
client.signIn('user@mail.com', 's3cr3t', { udid: 'unique-device-id' }).then(function (session) {
onSignedIn(session)
})
function onSignedIn(session) {
console.log('Signed in as', session.user.displayName)
client.messages.sendToUser(
'someone@mail.com',
'hello!'
).then(function (message) {
console.log('sent', message.body, 'to', message.recipient.displayName)
})
client.events.connect()
client.on('message', function (message) {
console.log(
'message event',
message.sender.displayName,
'to',
message.recipient.displayName,
':',
message.body
)
})
}
现在，请看一下以下提到的代码所在的位置。
client.on('message', function (message) {
console.log(
'message event',
message.sender.displayName,
'to',
message.recipient.displayName,
':',
message.body
)
})
我想知道如何使用RxJS来从这段代码中创建一个可观察的内容，以便订阅流，并且每当我们进行更改时，我都会根据需要获取新数据并对其进行处理。
请指教。
我正在尝试使用ng-bootstrap在我的角度应用程序中显示日期范围选择器.我的代码如下所示:
<ngb-datepicker #dp ngModel (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t">
</ngb-datepicker>
<ng-template #t let-date="date" let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
如何在弹出窗口中显示上述范围选择器？
根据答案,我尝试了以下操作,但点击时看不到弹出窗口:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Pick Date Range
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Optional title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button> …我一直在用Angular学习TypeScript。目前，我停留在这一刻。以前，我使用订阅方法，并且一切都可以正常工作，但不是我决定使用异步管道重写代码，但这只是行不通。
export interface responseFormat {
success: boolean;
data: any;
}export interface restaurant {
_id: string;
name: string;
description: string;
images: file[];
cuisines: cuisine[];
blocked: boolean;
created: Date;
business_hours: object;
}/* Provider */
getRestaurant(): Observable<responseFormat> {
return this.http.get<responseFormat>(environment.api + "/restaurant");
}
/* Component */
private restaurant: restaurant;
getRestaurant() {
this.restaurantProvider.getRestaurant().subscribe(res => {
if (res.success) this.restaurant = res.data;
});
}结果是分配了变量的类型。...但是我不想保留订阅记录，因此我想使用Angular异步管道来转换代码...这就是我所做的... 它不起作用
/* Provider */
getRestaurant(): Observable<responseFormat> {
return this.http.get<responseFormat>(environment.api + "/restaurant");
}
/* Component …angular ×10
javascript ×4
typescript ×2
angular7 ×1
asp.net-core ×1
bootstrap-4 ×1
c# ×1
css ×1
mobile ×1
ng-bootstrap ×1
ngx-quill ×1
observable ×1
popup ×1
quill ×1
routerlink ×1
rxjs ×1
rxjs5 ×1
sass ×1
viewchild ×1