我正在使用角度和角度材料的新版本.我需要获取datepicker用户更改日期时的值,然后将该值传递给函数并执行某些操作.
日期选择器
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="roomsFilter.date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker [(ngModel)]="roomsFilter.date" ngDefaultControl (selectedChanged)="onChange($event)"></mat-datepicker>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)
这个功能.
public onChange(event: any, newDate: any): void {
console.log(event.target.value);
// this.getData(newDate);
}
Run Code Online (Sandbox Code Playgroud) 我在项目上使用gulp,然后我决定删除所有dev依赖项以切换到webpack,但每次我尝试使用npm安装时都会收到此错误:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Error: EPERM: operation not permitted, rename 'C:\Users\MiguelFrias\Desktop\Therabytes\node_modules\.staging\fsevents-e80c4ef4\node_modules\are-we-there-yet' -> 'C:\Users\MiguelFrias\Desktop\Therabytes\node_modules\.staging\are-we-there-yet-5db4c798'
npm ERR! path C:\Users\MiguelFrias\Desktop\Therabytes\node_modules\acorn
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\MiguelFrias\Desktop\Therabytes\node_modules\acorn' -> 'C:\Users\MiguelFrias\Desktop\Therabytes\node_modules\.acorn.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can …Run Code Online (Sandbox Code Playgroud) 我正在一个应用程序实现新的拖放从角度材料CDK和我试图取消元素按下的拖动事件Esc,我的意思是,我开始拖动元素,但如果我按,Esc而我拖动元素,它应该回到我开始拖动它的位置,到目前为止我还没有找到一种方法来做到这一点,有谁知道我怎么能这样做.关于这个任何想法的cdk文档中没有任何内容.我尝试做这样的事情.
模板
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let movie of movies" (cdkDragEnded)="onDragEnded($event)" cdkDrag>{{movie}}</div>
</div>
Run Code Online (Sandbox Code Playgroud)
Ts分量
onDragEnded(event: CdkDragEnd) {
console.log(event)
event.source.element.nativeElement.style.transform = 'none';
const source: any = event.source;
source._passiveTransform = { x: 0, y: 0 };
}
Run Code Online (Sandbox Code Playgroud)
但到目前为止没有成功.
有没有办法从角度材料 2 在日期选择器上设置时区?
成分:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud) 我正在使用 angular 4、firebase 和 angular bootstrap。我打开模态,这是一个用户表单,想法是在用户使用其中一种登录方法(google auth、facebook auth 或电子邮件和密码身份验证)登录后立即关闭模态。但是我找不到在需要时关闭模态的方法。
谷歌认证
export class NavComponent implements OnInit {
@ViewChild('close') public modal: ElementRef;
constructor() {}
public openModal(content) {
this.modalService.open(content).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
public googleLogin(content): …Run Code Online (Sandbox Code Playgroud) 由于某种原因,vscode 停止打开集成终端,现在每次尝试打开终端时都会出错。我已经尝试重新安装 Git 但到目前为止还没有任何想法,在这里我留下了配置和错误的图片:
我什至试图为 powershell 更改 bash 终端,但仍然什么都没有,不知道会发生什么。
我有一个对象,其中一个属性是一个对象数组,想法是如果一个条件为真,将对象从该数组移动到没有新对象.
public $onInit(): void {
this.getTicket();
}
public ticket: any; // Object with the array
public comments: any = []; // New array to move the elements
public getTicket(): void {
this.ticketService
.getTicketComplete(this.$stateParams.ticketID)
.then((response: any) => {
this.ticket = response;
this.stringToDate(this.ticket);
this.ticket.messages.forEach((elem, index) => {
if (elem.type === "comment") {
this.ticket.messages.splice(index, 1);
this.comments.push(elem);
}
});
console.log(this.ticket);
});
}
Run Code Online (Sandbox Code Playgroud)
我的问题是下一个:数组有类型的对象,消息和评论,如果数组有2个消息和3条评论,应该推到新阵列3的评论,并留下2个消息,但仅移动2评论.
任何的想法.谢谢你的帮助.
我BehaviorSubject在我的一个服务中创建,并使用它asObservable稍后订阅它,但我需要在控制器被销毁后取消订阅,我该如何取消订阅它.
服务
import { Observable, BehaviorSubject } from 'rxjs';
private currentStepObject = new BehaviorSubject<number>(0);
public currentStepObservable = this.currentStepObject.asObservable();
constructor(
) { }
public changecurrentStep(step: number): void {
this.currentStepObject.next(step);
}
Run Code Online (Sandbox Code Playgroud)
调节器
import { ReaderService } from '../../../../services/reader/reader.service';
constructor(
private readerServices: ReaderService
) { }
ngOnInit() {
this.initDocumentData();
this.readerServices.currentStepObservable
.subscribe((step) => {
this.currentStep = step;
});
}
ngOnDestroy() {
}
Run Code Online (Sandbox Code Playgroud) 我正在处理元素列表并使用管道过滤列表,过滤器是多选以使用多个值过滤,我将过滤器保存在本地存储中以在关闭窗口或重新加载后在过滤器中持久化页面,在mat-checkbox组件中,我在[checked]="existInArray(color.id, filterColor)"指令中使用 i 函数来检查复选框,如果该值已经在过滤器数组中以检查复选框,但我有一个问题,如果使用该函数检查该复选框,则下次我单击取消选中的复选框,复选框不会改变 的状态checked true to false,只有当我第二次单击时才更改为checked false
模板
<mat-checkbox *ngFor="let color of filterService.getFilter(filterType.FILTER_COLOR).items.ToArray() | filterQuery:filterOptions.color"
[checked]="existInArray(color.id, filterColor)" class="filter-checkbox" [value]="color.id" [hidden]="color.id === '999999'"
(click)="filterBy(filterType.FILTER_COLOR, color.id, filterColor)">
<div class="assigned">
<div class="assigned-avatar text-center" [ngStyle]="{ 'background-color': color?.color?.bgColor }"></div>
<p class="assigned-name">{{ color.name }}</p>
</div>
</mat-checkbox>
Run Code Online (Sandbox Code Playgroud)
过滤器.ts
public existInArray(element, array: Array<string>): boolean {
return array.indexOf(element) > -1;
}
public filterBy(filterType: FilterTypeEnum, element: any, array: Array<string>) {
this.toggleInArray(element, array);
this.updateFilterObservable(filterType);
}
Run Code Online (Sandbox Code Playgroud)
例如,正如您在图像中看到的,默认情况下已选中复选框,因为我使用该existInArray函数检查过滤器数组中是否已存在选中的值,如果我尝试取消选中它,则第一次不起作用,但是当我第二次单击复选框未选中时,知道可能是什么......?
我认为原因是因为[checked]在我从数组中切换元素之前是触发器,但到目前为止不知道如何解决......任何想法。
刷新页面后,身份验证似乎并不持久。每当我登录时,它都会成功重定向我。但是,当我刷新时,再也无法访问了。
这是身份验证保护
路由器
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './components/nav/nav.component';
import { HomeComponent } from './components/home/home.component';
import { GalleryComponent } from './components/gallery/gallery.component';
import { FooterComponent } from './components/footer/footer.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule, AngularFireDatabase …Run Code Online (Sandbox Code Playgroud) javascript firebase angularfire firebase-authentication angular
我正在使用 firebase,我将图像存储在我的 firebase 存储上,然后在视图上显示这些图像,每个图像都有一个按钮,这个想法是当用户按下按钮时下载图像,到目前为止我该怎么做我一直无法找到使用 angular 的方法,在图像对象上,我存储了downloadUrl上传图像时提供的火库,我想使用该 URL 下载图像
成分
<div class="wrapper-gallery" id="photos_container">
<div class="mix col-xs-12 col-sm-4 col-md-3 item-photo" *ngFor="let photo of couplePhotos | async | sortByFavorites: sortBy | sortByTime: sortBy">
<div class="photo">
<img class="img-fluid" src="{{photo.data.photo_url}}" alt="{{photo.data.name}}">
<button class="delete" (click)="deletePhoto(photo.id, photo.data.name)"><span class="icon-cross"></span></button>
<a class="search zoom" data-fancybox="wedding" href="{{photo.data.photo_url}}"><span class="icon-search"></span></a>
<button class="star" [ngClass]="{'start-on': photo.data.favorite == true}" (click)="toggleFavorite(photo.id, photo)"><span class="icon-star-full"></span></button>
<button class="download" (click)="downloadImg()"><span class="icon-download"></span></button>
<a [href]="photo.data.photo_url" download></a>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud) angular ×9
javascript ×5
firebase ×2
typescript ×2
angular-cdk ×1
angularfire ×1
datepicker ×1
fuse ×1
git ×1
npm ×1
npm-install ×1
npm-scripts ×1