标签: angular8

我在手风琴中递归地调用组件以显示树状结构。

该代码适用于短输入，但在嵌套数据的递归调用上滞后

它就像一棵 json 树。

//sample.component.html
<app-tree [input]="data"></app-tree>


//tree.component.html

    <mat-accordion>
        <mat-expansion-panel hideToggle="true" (click)="toggleTree($event, input)">
          <mat-expansion-panel-header>
            <mat-panel-title>
                <mat-icon>{{input.buttonName}}</mat-icon>
                {{input.key}}
            </mat-panel-title>
          </mat-expansion-panel-header>
          <ul class="main-obj">   // tried *ngIf here
             <div class="obj-list" *ngFor="let item of input.value; trackBy: trackChanges">
                <li>
                  {{item.key}}: {{item.value}}
                </li>
                <li style="list-style: none; margin-left: -40px;">
                    <app-tree [input]="item"></app-tree>
                </li>
            </div>
         </ul>
        </mat-expansion-panel>
    </mat-accordion>

//tree.component.ts

    import { Component, OnInit, Input, Output } from '@angular/core';
    import { EventEmitter } from 'events';

    @Component({
      selector: 'app-tree',
      templateUrl: './tree.component.html',
      styleUrls: ['./tree.component.css']
    })

    export class TreeComponent implements OnInit { …

ngOnInit(): void {
  this.customerForm = this.fb.group({
    name: ['', Validators.required],
    customer_id: ['', Validators.required],        
  })
}

我有这个有角度的表格组。这是一个包含名称和 customer_id 的表单。我需要的是我想验证名称字段。它不应该接受任何特殊字符。如果可能的话，请在使用 toastr 时提及

<td>
    <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput placeholder="Name" formControlName="name" autocomplete="off" required>
    </mat-form-field>
</td>

我研究了有关此问题的所有类似问题，其中一些有帮助，但没有直接解决将 xlsx 文件保存到本地 Win10 下载文件夹的问题。

xlsx 文件位于 CentOS 7 服务器上。如果我用Filezilla复制到Win10就可以了。

查看下面的组件代码，我正在从服务器读取 xlsx 并获取其 base64Str，它与我用来存储文件的内容完全匹配。我创建了一个 blob，但FileSaver将 Win10 文件及其内容保存为 base64Str，而不是 xlsx 二进制文件。FileSaver 可以保存二进制内容，还是只能保存文本？

感谢您的帮助！

组件代码

//INPUT DATA: docName: test.xlsx; mediaType: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; snippet base64Str: VUVzREJCUU...FBQUFBPQ=
//NOTE: input data is from a CentOS 7 filesystem 

const byteStr = atob(base64Str);
const arrayBuffer = new ArrayBuffer(byteStr.length);
const int8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteStr.length; i++) {
  int8Array[i] = byteStr.charCodeAt(i);
}
const blob = new Blob([arrayBuffer], { type: mediaType }); …

我正在使用ViewChild进行角度表单提交。这是我的代码，

应用程序组件.ts

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('f') signupForm: NgForm; 

    onSubmit(){
        console.log(this.signupForm);
    }
}

应用程序组件.html

<form #f="ngForm" (ngSubmit)="onSubmit()" novalidate></form>

但我收到这个错误

src/app/app.component.ts:11:21 - 错误 TS2564：属性“signupForm”没有初始值设定项，并且未在构造函数中明确分配。

11 @ViewChild('f') signupForm: NgForm;

我正在尝试验证Angular项目中的输入字段并使用教程，似乎它按预期工作。

Angular 中的验证

上面使用反应式表单来完成验证工作，如下所示：

<form [formGroup]="angForm" novalidate>
    <div class="form-group">
        <label>Name:</label>
        <input class="form-control" formControlName="name" type="text">
    </div>
    <div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['name'].errors.required">
          Name is required.
        </div>
    </div>
     <div class="form-group">
        <label>Address:</label>
        <input class="form-control" formControlName="address" type="text">
    </div>
    <div *ngIf="angForm.controls['address'].invalid && (angForm.controls['address'].dirty || angForm.controls['address'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['address'].errors.required">
          email is required.
        </div>
    </div>
    <button type="submit"
        [disabled]="angForm.pristine || angForm.invalid" class="btn btn-success">
        Save
    </button>
</form>

上面的按钮默认是禁用的。因此，当用户开始书写并将输入字段保留为空白时，它就会验证表单。我的要求是启用该按钮，单击时验证将起作用。所以我所做的如下：

<form [formGroup]="angForm" #addData='ngForm' (ngSubmit)="AddData(addData)">

<button type="submit" class="btn btn-success"> //Removed the disabled property …

有一个 Material 属性matTreeNodePadding可以为 DOM 元素设置 padding-left：

<div matTreeNodePadding></div>

渲染此块后：

   <div style="padding-left: 40px;"></div>

如何将此填充减少到 20px？

我需要在我的 angular 应用程序中创建一个服务，所以我这样做：

@Injectable({
  providedIn: 'root'
})
export class PropertiesNameService  {

  products: string[] = [];

  constructor(private http: HttpClient) {
    console.log('HI');
    this.http.get('****').subscribe(data => {
    //   console.log(data);
   });
  }
}

在我的 app.module 我这样做：

import {PropertiesNameService} from './propertiesName/properties-name.service';
....

providers: [PropertiesNameService],

问题是，当我启动应用程序并打开控制台时，我看不到 "HI" 。我使用 angular 8 任何人都可以帮助我吗？

如何在 Angular 中创建一个月份日期选择器，不包括隐藏日期和年份？

此以下链接将执行月份和年份选择器。我试图操纵它只做 Month Only。如何配置？

闪电战：

https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

结果应该是这样的，发出的值可以是例如 May：a) 5 或 b) 2020 年 5 月 1 日。我可以删除 Day 和 year later 。

资源：Angular Material DatePicker：月和日，不包括年

我在服务器上托管了我的 angular 应用程序。当我单击服务器 url 时，它会将我重定向到登录页面。但是，当我刷新以 login 为后缀的相同 url 时，它给了我 404 not found 错误。给出的原始网址没有登录后缀。请帮忙。

在 app.routing.module.ts 中，我配置了这样的路由器路径：

我必须制作一个由一系列动态创建的复选按钮组成的表单。我的灵感来自一个网站的代码，但它总是给我这个错误：“找不到名称为'0'的控件”。我该如何解决？谢谢你们！

代码打字稿：

import { Component, OnInit, Input } from '@angular/core';import { FiguraProfessionale } from 'src/app/model/FiguraProfessionale';
import { FiguraProfessionaleCompetenza } from 'src/app/model/FiguraProfessionaleCompetenza';
import { Competenza } from 'src/app/model/Competenza';
import { AssociaFiguraProfessionaleCompetenzeServiceService } from '../associa-figura-professionale-competenze-service.service';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, FormArray, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-associa-figura-professionale-competenze',
  templateUrl: './associa-figura-professionale-competenze.component.html',
  styleUrls: ['./associa-figura-professionale-competenze.component.css']
})
export class AssociaFiguraProfessionaleCompetenzeComponent implements OnInit {

  figuraProfessionaleCompetenza: FiguraProfessionaleCompetenza;

  listaFiguraProfessionale: Array<FiguraProfessionale>;

  listaCompetenza: Array<Competenza>;

  form: FormGroup;

  constructor(private formBuilder: FormBuilder, private servizio: AssociaFiguraProfessionaleCompetenzeServiceService, private route: …