标签: angular7

每次我提交登录表单时，方法return res;中的Login()代码（见下文）都会执行两次。

第一个响应是一个简单的对象{ type: 0 }，第二个响应是我正在寻找的实际响应。

为什么会return res;被叫两次？我该如何防止这种情况发生？

我已单步执行代码并确认login()仅被调用一次，我的HttpInterceptor仅被调用一次，并且远程请求仅被发送一次。

我上传了这张图片来帮助解释发生了什么。您可以看到仅执行了 1 个远程请求，但已将 2 个响应记录到控制台。

这个问题是几个小时前才开始出现的。我一直在努力让离子服务与 CORS 一起使用，我尝试使用proxy.conf.json但proxy.js无法访问 API，我无法允许访问。出于开发目的，我使用此扩展在 Chrome 中禁用了 CORS ，因为一旦我在移动设备上运行该应用程序，它就不需要 CORS。

我尝试过的其他故障排除：

1. 在 Chrome 中禁用了 Allow-Control-Allow-Origin: * 扩展，问题仍然存在
2. 我从 app.module.ts 中删除了 HttpInterceptor，问题仍然存在
3. 我尝试了不同的远程 URL（甚至是 localhost），但问题仍然存在
4. 关闭 Chrome 并重新启动 PC，问题仍然存在
5. 尝试使用FireFox，问题依然存在
6. 我创建了一个新的 Ionic4 项目并复制/粘贴相同的代码，问题仍然存在
7. 我在另一台机器上尝试使用 Chrome，问题仍然存在

这是我login()在我的方法中订阅的可观察对象onSubmit()：

login(username: string, password: string) {

  const body = …

我尝试在 angular7 中使用 ag-grid，我的代码如下所示：

    从 '@angular/core' 导入 { Component, OnInit };
    从 '@angular/common/http' 导入 { HttpClient, HttpHeaders };

    从“ag-grid-angular”导入{AgGridModule}；

    @成分（{
      选择器：'app-top100sp'，
      templateUrl: './top100sp.component.html',
      styleUrls: ['./top100sp.component.css']
    })
    导出类 Top100spComponent 实现 OnInit {


      私有top100url = 'http://resturl';

      私有网格选项；
      私有每页行= 20；

      专用端点；
      私有行数据；
      私有休息数据源；

      私有columnDefs = [
        。
        。
        。
      ];

      构造函数（私有http：HttpClient）{}

      ngOnInit() {
          this.gridOptions = {
              columnDefs: this.columnDefs,
              rowModelType: '无限',
              //数据源：this.restDatasource，
              启用服务器端过滤器：假，
              启用服务器端排序：假，
              分页：真实，
              分页页面大小：this.row_per_page
         };
      }

      网格就绪（$事件）{
          console.log("onGridReady "+$event.api.paginationGetPageSize());
          this.restDatasource = {
              行数：空，
              getRows：函数（参数）{
                  console.log(params.startRow + " 到 " + params.endRow);
                  this.endpoint …

我正在使用元素加载 svg 文件Object，并从 TypeScript 文件中尝试读取和修改 svg（例如动态着色、创建一些 svg 元素以及附加到现有 svg），但遇到以下错误：

Property 'contentDocument' does not exist on type 'HTMLElement'

我正在使用 Angular 7。

在app.component.html中

 <object id="svg1" data="assets/10026_019.svg" type="image/svg+xml" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></object>

在 app.component.ts 中

let obj=document.getElementById('svg1');
    let svg2=obj.contentDocument.querySelector("svg");
 let pt = svg2.createSVGPoint();

实际上它在 处显示错误（红线）contentDocument，但是当我运行该应用程序时，即使报告了错误，它也工作正常。

但当我这样做时ng build，它报告了这个问题。

我不确定如何纠正此错误以使构建成功。

如何通过 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"> …

我有一个 Ionic 4 应用程序，以及带有自定义组件的 Angular 7。在这个组件中，我实现了对事件的订阅。活动发布后，我毫无问题地收到消息。如果我离开该组件并再次返回该组件，如果发布了事件，我会收到该消息两次。似乎同一控制器的前一个实例没有被销毁（如果 ngOnDestroy 被触发 - 我已经插入了一个 console.log）。如果我重复此操作（离开并返回），我会收到 3 条消息，然后是 4 条，依此类推。

所以，我的问题是：该组件是被破坏还是保留在内存中？

我希望每次进入组件时都会有一个新实例，并且所有先前的实例都会被销毁。

在另一个组件中注入组件来访问注入组件中的函数或属性是否正确？
注意：这些组件都不是另一个组件的子组件

import { UsersComponent } from './../users/users.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(users:UsersComponent){
    users.getAllUsers()
  }
}

如何将此 javascript 和 HTML 代码添加到 Angular 项目中？ 我已将 func.js 放在我的 Angular 项目的 src 文件夹中以及我尝试导入和使用 ngAfterViewInit() 来加载和使用 javascript 函数的 app.component.ts 文件中

这些是我尝试添加到 Angular Web 应用程序中的 javascript 和 html 文件：

函数.js

const uName = 'admin';
const uPass = '12345';
const endpoint = 'http://11.11.111.241:8000';
const resource = {
    questionnaire: 'Questionnaire',
    valueset: 'ValueSet'
}

//get questionnaire
var url = 'http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-community-on';
var quesJson = getData(resource.questionnaire, '?url=' + url);
quesJson = quesJson.entry[0].resource
// saveJsonToFile(quesJson, 'irrsQuesJson');
var copy = $.extend(true, {}, quesJson);
//convert to lhc form
var …