使用Angular,我从Firebase中提取数据.我希望用户的聊天消息基于用户选择的颜色item.color.对于使用蓝色的用户,我得到了WARNING: sanitizing unsafe style value background-color:blue (see http://g.co/ng/security#xss).
我的HTML:
<div *ngFor="let item of items; let i = index">
<ion-card style="background-color:{{item.color}}" [ngClass]="{'me': item.sender == sender, 'notme': item.sender != sender}">
<ion-card-header *ngIf="item.sender != sender">
@{{item.sender}}
</ion-card-header>
<ion-card-content>
{{item.message}}
</ion-card-content>
</ion-card>
</div>
我的TS:
import { Component, OnInit, ViewChild } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database-deprecated';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';
import { DomSanitizer } …我正在使用ChangeDetectorRef在Web请求后更新视图.
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { QRCodeModule } from 'angularx-qrcode';
@Component({
selector: 'app-print',
templateUrl: './print.component.html',
styleUrls: ['./print.component.css'],
})
export class PrintComponent implements OnInit {
barcodeitems;
selecteditems = [];
constructor(public http: HttpClient, private cdr: ChangeDetectorRef){
}
ngOnInit(): void {
}
getqr() {
console.log("selecteditems array", this.selecteditems);
let filterQuery = this.selecteditems.map(i => `ID eq '${i}'`).join(" or ");
let url = `https://example.com/corporate/dev/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$top=1000&$orderBy=ID&$filter=${filterQuery}`
this.http.get(url).subscribe(data => {
this.barcodeitems = data['value'];
this.cdr.detectChanges();
});
} …使用Angular 5和Firebase,我正在存储和检索电影评论信息.在创建和编辑评论时,会保留换行符(我假设使用ngModel与此有关).但是,从读者的角度检索评论时ReviewComponent,不会保留换行符.记录正文仍然显示换行符并使用Angular的json管道显示来text\n\ntext显示换行符的位置.
这是我的HTML:
<main role="main" class="container">
<p style="margin-bottom: 2rem;">{{review.body}}</p>
</main>
我也曾尝试span和body.
如何在读者的评论中保留这些换行符？
使用 Angular 5，我select()从一个组件中触发一个函数，仅用于选择触发另一个函数，getqr()在另一个组件中进行打印。getqr()为从第一个组件中选择的项目触发 Web 请求。为了更新打印视图以反映请求，我使用ChangeDetectorRef. 这样做给我一个错误：
StaticInjectorError(AppModule)[PrintComponent -> ChangeDetectorRef]:
StaticInjectorError(Platform: core)[PrintComponent -> ChangeDetectorRef]: NullInjectorError: No provider for ChangeDetectorRef!
我不确定这里的问题是什么，因为我不能（也不应该）添加ChangeDetectorRef到providersapp.module.ts 中。
这是选择组件的 TS：
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PrintComponent } from './print/print.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
docs;
constructor(public http: HttpClient, public print: PrintComponent) { }
ngOnInit() {
this.http.get("https://portal.oldnational.com/corporate/portalsupport/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$top=1000&$orderBy=DocumentGroup,Title").subscribe(data …使用for循环，我已经通过在Web请求检索到的项目循环，设置的属性创建为后期项目的计数器late为true，如果条件得到满足，并且增加计数器。
使用*ngIf，我可以执行以下操作：
<h5 *ngIf="lateCount != 1">You have {{lateCount}} late items.</h5>
<h5 *ngIf="lateCount == 1">You have {{lateCount}} late item.</h5>
有没有办法在没有两个*ngIfs 的情况下做到这一点？
我使用.map()从表单中的值对象创建查询参数.
let object = {
"selectedPriority": "9",
"selectedShipOption": "Private Label",
"selectedCustomerStatus": "No",
"selectedColdOptions": [],
"selectedDistributionOptions": ["Retail"],
"selectedPackagingOption": "Lid",
"selectedPrepOption": "Hot Water",
"productParams": ["Kosher\n"],
"productAppearance": "Grill Marks",
"storage": "CAP",
"preservatives": "Only natural preservatives"
}
Object.keys(object).map((key, index) => {
console.log(`?${key}=${object[key]}`)
});现在我已经操作了每个对象和键,我想将它们连接在一起以创建一个查询字符串.
我怎样才能做到这一点？
我创建了一个带有 *ngFor 的表，用于显示来自 Web 请求的数据。这是模板代码：
...
<tr *ngFor="let task of tasks">
<td>{{task.ID}}</td>
<td><a (click)="openTaskArea(task.TaskType0.ID)" class="viewLink">{{task.TaskType0.Title}}</a></td>
<td><a (click)="editTask(task.ID)" class="viewLink"></a></td>
<td><a (click)="openTask(task.ID)" class="viewLink">{{task.Title}}</a></td>
<td>
<ng-container *ngIf="task.AssignedTo">{{task.AssignedTo.Title}}</ng-container>
</td>
</tr>
...
此 Web 请求在加载时以及允许创建新项目的模式关闭时触发。
这是获取此数据的函数：
getTasks() {
this.http.get(`https://example.com/_api/web/lists/getbytitle('Tasks')/items`).subscribe(data => {
// console.log(data['value'])
this.tasks = data['value']
console.log(this.tasks)
})
}
当使用以下函数关闭模态时会触发此函数：
(function() {
this.getTasks();
}).bind(this);
this需要绑定，因为它的上下文正在丢失。这是此问题的推荐解决方案。
请求正确完成，因为我可以记录this.tasks但是，直到我单击表中的链接才会更新 DOM。
我该如何解决这个问题？
使用Angular,我试图将构造函数中的局部变量传递给HTML.
这是我的TS:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-random',
templateUrl: 'random.html'
})
export class RandomPage {
constructor(public navCtrl: NavController) {
var restaurants = [
'Restaurant1',
'Restaurant2',
'Restaurant3'
];
var restaurant = restaurants[Math.floor(Math.random()*restaurants.length)];
console.log(restaurant);
}
}
这是我的HTML:
<ion-content padding>
<ion-item>
{{restaurant}}
</ion-item>
</ion-content>
restaurant在构造函数触发时正在记录.我只是不确定如何在HTML中显示它.我错过了什么？