标签: angular7

我有这个服务器 API 用于帐户分页

 {
  accounts (offset: 2, limit: 1) {
    key
    name
  }
}

使用 Graphiql 一切正常

{
  "data": {
    "accounts": [
      {
        "key": "fde3d97d-6a44-4c36-bc59-149a3e8e51ac",
        "name": "a0f353611567c83e"
      }
    ]
  }
}

我按照 Apollo 文档将我的 Web 客户端连接到后端。默认查询有效，但是当我尝试添加变量时，我在服务器端收到此错误。

WARN  g.GraphQL - Query failed to validate : 'query Accounts($offset: Int, $limit: Int) {
      accounts(offset: $offset, limit: $limit) {
        key
        name
        __typename
   }
 }

我的角度（7）代码如下所示：

import { Component, OnInit } from "@angular/core";
import { Apollo, QueryRef } from "apollo-angular";
import { DocumentNode } from …

我正在开发我的第一个 Angular 7 库，但是在尝试编译该库时收到此错误。

错误：错误 TS6059：文件“...environment.ts”不在“rootDir”“my-angular-library\projects\my-library\src”下。“rootDir”预计包含所有源文件。

看着我的树，我有：

-projects
  -my-library
     -src
-src
  - environments

在我的课堂上，我有以下导入：

import { environment } from "src/environments/environment";

我正在检查其他线程，他们提到了打字稿中的错误，但是我正在运行最新版本的“打字稿”：“〜3.1.1”。

其他线程提到了错误配置的 rootDir。我检查了我的项目，没有在任何配置文件中定义 rootDir。

我不需要向项目添加环境，对吗？

我正在尝试使用 Angular Material 7 中发布的拖放功能。

我使用将模板分成可重复使用的部分ngTemplateOutlet，每个选项都可以是事物\xe2\x84\xa2 或嵌套事物\xe2\x84\xa2，其中有更多子事物\xe2\x84\xa2。

嵌套事物\xe2\x84\xa2 显示为扩展面板。\n我希望所有第一级事物\xe2\x84\xa2 都可以重新排序，就像它们是一个列表一样。

（好吧，好吧，很明显这是一个带有正常和嵌套选项的可重新排序的侧导航，只是假装它不那么明显）

这是我最初编写的代码。

<div cdkDropList (cdkDropListDropped)="dropItem($event)" lockAxis="y">\n  <ng-container *ngFor="let thing of things">\n      <ng-container\n        *ngTemplateOutlet="!thing.children ? singleThing : multipleThing; context: { $implicit: thing }"\n      ></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #singleThing let-thing>\n  <div cdkDrag>\n    <ng-container *ngTemplateOutlet="thingTemplate; context: { $implicit: thing }"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #multipleOption let-thing>\n  <mat-expansion-panel cdkDrag (cdkDropListDropped)="dropItem($event)">\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <p>Nested thing title</p>\n        <span cdkDragHandle></span>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <ng-container …

我已将我们的项目升级到 Angular 7，一切正常。但是，当我执行 ngserve --aot 或使用 aot = true 构建产品版本时，出现以下运行时错误：

error: Uncaught (in promise): TypeError: Cannot read property 'hasOwnProperty' of undefined
TypeError: Cannot read property 'hasOwnProperty' of undefined
at constructTimingAst (http://localhost:4200/vendor.js:2316:15)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitAnimate (http://localhost:4200/vendor.js:2025:25)
at visitDslNode (http://localhost:4200/vendor.js:1759:28)
at http://localhost:4200/vendor.js:2003:61
at Array.map (<anonymous>)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitSequence (http://localhost:4200/vendor.js:2003:35)
at visitDslNode (http://localhost:4200/vendor.js:1755:28)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitQuery (http://localhost:4200/vendor.js:2235:25)
at visitDslNode (http://localhost:4200/vendor.js:1771:28)
at http://localhost:4200/vendor.js:2003:61

有什么想法吗。

我正在使用 Angular 5.2.11 和 Election 版本 3.0.7，并尝试使用 Electron 菜单导航到 Angular 5 组件。当我单击电子菜单时，它会导航到该页面，但我的组件仅执行构造函数，而不执行任何角度生命周期挂钩，直到我单击电子窗口。然后页面就会加载并按预期工作。

菜单.js 文件：

const { Menu } = require('electron');
const menuTemplate = [
      label: 'Maintenance',
      submenu: [
          {
              label: 'Sar Maintenance',
          }
      ];

menu = Menu.buildFromTemplate(menuTemplate);    
Menu.setApplicationMenu(menu);

exports.ApplicationMenu = menu;

索引.ts 文件：

const { app } = require('electron');
const BrowserWindow = require('electron').BrowserWindow

let ipcm = require('electron').ipcMain;
let appmenu = require('./menu.js');
let menu = appmenu.ApplicationMenu;
let mainWindow;

function createMainWindow () {
    mainWindow = new BrowserWindow({width:  800, height: 800});
    mainWindow.loadURL(`file://${__dirname}/index.html`);

    menu.items[1].click …

我在我的 Angular 7 项目中使用 CKEditor 5。我已遵循官方文档，并在编辑器内容更改时使用'ChangeEvent'检索数据。现在我想每当单击“保存”按钮时检索数据。

1. 我的CKEditor工具栏没有保存按钮，如何添加？

2. 当我点击保存按钮时如何检索数据？

3. 我想在表单中使用CKEditor，以便在单击提交按钮时检索数据。如何实现这一目标？

这是html代码：

<ckeditor [editor]="Editor"  (change)="onChange($event)"  >
</ckeditor>
<button (click)=save()>Save</button>

这是打字稿：

public Editor = ClassicEditor;

public onChange( { editor }: ChangeEvent ) {
const data = editor.getData();
console.log( data );
}

save(){
const data = this.Editor.getData();
console.log( data );
}

提前致谢。

如何通过 Ionic 4 选项卡按钮传递参数

    <ion-tabs>
    <ion-tab-bar slot="top" color="light">
      <ion-tab-button tab="tab1">
        <ion-label> Tab 1 </ion-label>
      </ion-tab-button>
      <ion-tab-button tab="tab2">
        <ion-label> Tab 2 </ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

在我的 tabsmain.module.ts 中，将每个路由路由为

    const routes: Routes = [
  {
    path: '',
    component: TabsmainPage, children: [
      { path: '', loadChildren: './pages/tab1/tab1.module#Tab1PageModule' },
      { path: 'tab1/:id2', loadChildren: './pages/tab1/tab1.module#Tab1PageModule' },
      { path: 'tab2', loadChildren: './pages/tab2/tab2.module#Tab2PageModule' }},
    ]
  }
];

我想像通过 NavParams 一样传递一些 ID 作为参数请帮助我，如何通过ion-tab-button传递参数

我正在尝试使用 Cypress 和cypress-plugin-snapshots在我的页面上进行 e2e 测试的快照测试。

但我得到了这个错误TypeError: cy.document(...).toMatchSnapshot is not a function。

这是我的配置：

插件/index.js

const { initPlugin } = require('cypress-plugin-snapshots/plugin');

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  initPlugin(on, config);
  return config;
}

支持/index.js

import 'cypress-plugin-snapshots/src/commands';

赛普拉斯.json

{
    "ignoreTestFiles": [
        "**/__snapshots__/*",
        "**/__image_snapshots__/*"
    ]
}

home.spec.js

context('Querying', () => {
    beforeEach(() => {
        cy.server();
        cy.fixture('user.json').as('userJSON');
        cy.route('GET', 'users?id=*', '@userJSON').as('getUser');
        cy.visit('http://localhost:4200/1');
    })

    it.only('LANDING - …

我想获取 base64 字符串并用它来显示图像。
下面是 HTML 文件。我想使用 base64 字符串并在 img 标签中使用它：

<ion-content>
  <ion-card>
      <img src={{imageFileBinary}} />
        <ion-card-header>
            <form>
                <ion-input id="myform" type="file" name="file" (change)="postMethod($event.target.files)"></ion-input>
            </form>
        <ion-card-title>Nick</ion-card-title>
    </ion-card>
</ion-content>

我从 .ts 文件中获取 imageFileBinary。
下面是 .ts 文件：

export class MyprofilePage implements OnInit {


  imageFileBinary;

  userDetails: UserDetails;
  constructor(private profileDetailService: ProfileDetailsService, private httpClient: HttpClient) {}

  fileToUpload;

  getProfileDetails() {
    this.profileDetailService.getUserDetails('email').subscribe((userDetails: UserDetails) => {
      this.imageFileBinary = userDetails.imageFileBinary
    });
  }
  postMethod(files: FileList) {
    this.fileToUpload = files.item(0);
    let formData = new FormData();
    formData.append('file', this.fileToUpload, this.fileToUpload.name);

    this.httpClient.post("http://localhost:8080/uploadFile", formData).subscribe((val)=> {
      console.log(val);
    }); …

我正在开发 Angular7 项目，并遇到完整日历的问题。我想在选项卡上显示日历，但角度完整日历未在选项卡活动时初始化。请参考下面的截图

我正在使用材质选项卡https://material.angular.io/components/tabs/overview，对于完整日历，我已经集成了https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/angular这个。

代码

约会-Calendar.Component.ts

 export class AppointmentCalendarComponent implements OnInit {

        @ViewChild('calendar', {static: true}) calendarComponent: FullCalendarComponent; // the #calendar in the template


        calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin];
        calendarWeekends = true;

       calendarEvents: EventInput[] = [{"title":"Dr. Helen Jones 07:20 PM","start":"2019-07-31 19:20:00"},{"title":"Dr. Jonathan 07:20 PM","start":"2019-08-07 19:20:00"}];


      constructor() { }

       ngOnInit() {}


    }

约会.component.ts

<mat-tab-group [selectedIndex]="selectedTab" [disableRipple]="true" animationDuration="0ms">
        <mat-tab label = "List View"> 
             <app-appointment-listing (selectTab)="getOutputval($event)" ></app-appointment-listing>
        </mat-tab>
        <mat-tab label = "Calendar">
           <app-appointment-calendar (selectTab)="getOutputval($event)"></app-appointment-calendar> 
        </mat-tab>
    </mat-tab-group>

约会-calendar.component.html

<div class="card card-box"> …