标签: angular5

login.component.ts

import { Component, OnInit,ViewChild , Inject} from '@angular/core';
import { Login }    from './login';
import {MatPaginator, MatSort, MatTableDataSource, MatDialog,MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent {

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'app-login',
  templateUrl: 'dialog-overview-example-dialog.html',
}) …

我有一个孩子和一个父组件.

我想从子组件传递一个数组并将其显示在父组件中.

我首先开始:

@Input data: string[];

然后ngOnInit我有:

ngOnInit() {
   this.data = ['name1', 'name2', 'name3'];
}

然后我有父组件:

<app.parent></app.parent>

我的问题是:如何在父组件中显示此数据？

我正在尝试使用接口从API获取数据.贝娄是我的临时界面

export interface ITemp {
    id: number,
    name: string,
    age:  number
}

下面是我的HTTP服务,其中有一个fn getHomedetails,它调用API.

import {Injectable} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ITemp } from "../interfaces/temp";
import { Observable } from "rxjs/Observable";
import 'rxjs/Rx';

@Injectable()
export class HttpService{

    http:any;
    baseUrl: String;

    constructor(http:HttpClient){
        this.http = http;
        this.baseUrl = 'some_url';
    }

    getHomeDetails(): Observable<ITemp>  {
        return this.http.get<ITemp>(this.baseUrl); //problem is here 
        //when mouse is pointed on get<ITemp> it shows "Untyped function calls may not accept type arguments"

    }

}

接口未定义.我不知道我做错了什么.上面的语法是一个有角度的4.3X语法.我使用的编辑器是崇高的视觉工作室.

我有以下功能

add(playload) {
    return this.http.post(`/api/v1/cards.json`, { text: trim(playload) });
}

它输出如下.

error TS2304: Cannot find name 'trim'.

我该如何解决这个错误？

我有两个页面(diary.component和redactor.component)都绘制相同的组件food.component,只有很小的区别:如果是diary.component- 食物应该有一个"添加按钮".如果是redactor.component- 食物应该有一个删除按钮.我尝试在父组件中food.component.html使用boolean解决此问题,并使用*ngIf 检查此状态,但它不起作用.问题是什么,我该如何解决？这是我的代码,以便更好地理解:

diary.component.ts

isDiary: boolean;
ngOnInit() {
    this.isDiary = true;
}

food.component.html

<div class="food">

  <button *ngIf="isDiary; else isRedactor" (click)="sendFood(food.name, food.nutritional_value)" class="add-btn" type="button">
    <i class="fas fa-plus"></i>
  </button>

  <ng-template #isRedactor>
    <button><i class="fas fa-times"></i></button>
  </ng-template>
  ...
</div>

谢谢 !

在选择复选框时，我应该启用提交按钮。我正在用angular 5和打字稿来做。这是我现有的代码

 <mat-checkbox>I agreeTerms & Conditions</mat-checkbox>
<button  mat-button class="NxtBtnWrap"  type="submit" >Submit</button>

因此，我一直在努力进入ASP.NET Core 2和Angular 5（我是Django / Rails Vue专家），在做了一些琐碎的示例之后，我决定用新的堆栈构建我的旧产品之一。问题是我无法找出此错误的来源。

这是我的登录组件模板：

<div class="login-container">
  <h2 class="login-title">{{title}}</h2>
  <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-horizontal">
    <div class="form-group" *ngClass="{' has-errors has-feedback' : hasErrors('Username')}">
      <input type="text" formControlName="Username" class="form-control" required placeholder="Usuario o Email" />
    </div>
    <div class="form-group" *ngClass="{' has-errors has-feedback' : hasErrors('Password')}">
      <input type="password" formControlName="Password" class="form-control" required placeholder="*****" />
    </div>
    <button type="submit" [disabled]="form.invalid" class="btn btn-md btn-success">Entrar</button>
  </form>
</div>

这是打字稿：

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


  title: string;
  form: FormGroup;

  constructor(private router: Router,
    private fb: …

控制台日志无法读取我component.ts 上未定义的属性“ toLocaleString”，我正在使用此方法从json获取数据

getChartProducts() {

        this.TicketService.getAlladminPage(this.number, this.size, this.sort, this.orderByColumn)
          .subscribe(
            (chart: any[]) => {

              let item = 0;

              if (chart['content']) {
                while(item < chart['content'].length){

                  let chartItem = {
                    'name' : chart['content'][item].name,
                    'price': chart['content'][item].price
                  };

                  this.chart.push(chartItem);
                  item ++;
                }

                console.log( this.chart);
              }
            });

      }`

我也设定

`
     chart: { name :string, price :number}[] = [];
view: any[] = [700, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  showYAxisLabel = …

我正在使用Angular 5,bit-bucket,azure app服务,我已经设置了与bit-bucket和Azure部署选项的持续集成.

请找到以下详细信息

项目结构

我的package.json

{
  "name": "vaquarkhana-poc-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build –prod ",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "npm run build"
  },
  "engines": {
    "node": ">=10.0.0",
    "npm": ">=6.0.0"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.6", …

我正在将Angular 5与ngx-toastr一起使用。我使用以下代码来呈现HTML标记以及类似消息：Hi<b>Hello</b>这是不期望的。

this.toastr.warning("Hi<b>Hello</b>");

另外，我使用下面的代码，该代码没有控制台错误，也没有任何输出（弹出窗口）：

this.toastr.show("<font color=\"red\">Hi<b>Hello</b></red></font>",null,{
disableTimeOut: true,
tapToDismiss: false,
closeButton: true,
positionClass:'bottom-left',
enableHtml:true
});

如何在ngx-toastr中启用HTML，以便使消息看起来像：嗨，你好