标签: angular6

我正在使用 Angular 6 和 Angular Material 6。在这里，我尝试使用面包屑创建多级菜单。我已经正确使用了多级菜单，但无法使用选定的面包屑导航菜单。当我单击选定的面包屑时，菜单无法正确组织。

我的演示链接：stackblitz 链接在这里

这是我的 HTML：

<nz-form-item nzFlex [formGroup]="hulkForm">
   <nz-form-label [nzSpan]="7" [nzFor]="hulkColumn.column" 
        [nzRequired]="hulkColumn.require">{{hulkColumn.lable}}</nz-form-label>
   <nz-form-control [nzSpan]="17">
   <input nz-input 
       placeholder={{hulkColumn.placeholder}} 
       [formControlName]="hulkColumn.name"
       [(ngModel)]="hulkColumn.model"
     [ngModelOptions]="{updateOn: 'blur'}"
     name="{{hulkColumn.name}}"
        *ngIf="hulkColumn.type!=='number'"
       >
 </nz-form-control>
</nz-form-item>

这是Chrome中的错误：

这是 app.module.ts：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {NgZorroAntdModule, NZ_I18N, zh_CN} from 'ng-zorro-antd';
import {registerLocaleData} from '@angular/common';
import zh from '@angular/common/locales/zh';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';


registerLocaleData(zh);

@NgModule({
  declarations: [
  AppComponent,
  ... …

我正在尝试动态填充表格，但无法弄清楚为什么这不起作用！

在这里，我得到了我的 json，我将对象数组保存在 customerArray 中。

export class AllCustomersComponent implements OnInit {
customerArray: any;


    constructor(private http : HttpClient ) {}

    ngOnInit() {
         this.http.get('http://www.mocky.io/v2/5be715ce2e00008a0016945e')
        .subscribe((data) => {
           this.customerArray = data;
          console.log(customerArray);
      }
    }
}

在这里，我试图用上述数组填充表格。

<table class="table">
        <thead>
          <tr>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Age</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Mark</td>
            <td>Otto</td>
            <td>46</td>
            <td><i class="fas fa-edit"></i></td>
            <td><i class="fas fa-trash-alt"></i></td>
          </tr>
          <tr>
            <td *ngFor="let customer of customerArray">{{customer}}</td>
          </tr>
        </tbody>
      </table>

但我的表只是呈现这个：

[object Object] [object Object] [object Object] [object Object] [object …

运行命令 ng serve 工作正常，因为 ng serve --prod 显示错误

ERROR in src\app\employee\employee.component.html(12,9): : Property 'emp' does not exist on type 'employee[]'.
src\app\employee\employee.component.html(23,9): : Property 'emp' does not exist on type 'employee[]'.
src\app\employee\employee.component.html(36,9): : Property 'emp' does not exist on type 'employee[]'.

员工.component.html

    <h2 mat-dialog-title>Edit details</h2>
<div mat-dialog-content>
  <form
    fxLayout="column"
    [formGroup]="editForm"
    #f="ngForm">
  <div class="input-row">
      <mat-form-field fxFlex>
        <mat-label>Id</mat-label>
        <input readonly 
        value="{{data.emp.id}}"
          matInput #id disabled
          formControlName="id"
          required/>
      </mat-form-field>
    </div>
    <div class="input-row">
      <mat-form-field fxFlex>
        <mat-label>Name</mat-label>
        <input 
        value="{{data.emp.name}}"
          matInput #name
          placeholder="Email"
          formControlName="name"
          required/>
      </mat-form-field>
    </div>

    <div …

我正在使用ngFor创建一个包含可点击图标的项目列表。
当我点击一个图标时，它会调用一个函数来更新后端的变量，成功时，我希望图标改变颜色。

如何“双向”绑定可迭代变量，obj以便当我在控制器中修改它时，它会反映在模板中？

模板：

<ion-item *ngFor="let obj of contactList | separator  " 
(click)="show_memories(obj.key, obj.bookName)" class="task-snoozed" no-lines>
    <button ion-button icon-only clear 
   (click)="$event.stopPropagation(); sendChangeState(obj, 'toBe', obj.toBeAlerted)">
        <ion-icon name="arrow-dropleft-circle" size="large" 
        [color]="obj.toBeAlerted ? 'primary' : 'gray-light'"></ion-icon>
    </button>

</ion-item>

控制器：

sendChangeState(contact:any, alertType:string, bool:boolean){

    this.firestoreService.changeAlertState(this.userId, contact.key, alertType, bool)
    .then(() => {
        //update the icon color here:
        contact.toBeAlerted = !contact.toBeAlerted; 
    });     
}

编辑 contactList 是一个像这样的对象：

嗨，我正在调用方法 onchange 事件，但对于日历输入，它没有得到应用。下面是代码。[(change)="makeDirty()"]。它适用于描述文本框，但不适用于日期选择器文本框。

    <div class="form-group mb-10">
      <label class="formLabel">Description</label>
      <input type="text" (change)="makeDirty()" class="form-control bg-grey" [(ngModel)]='description' [ngModelOptions]="{standalone:true}">
    </div>

    <div class="form-group mb-10">
        <label class="formLabel">Period</label>
        <input type="text" (change)="makeDirty()" placeholder="select start date and end date" class="form-control bg-grey" #dp="bsDaterangepicker"
          bsDaterangepicker [(ngModel)]="bsRangeValue" [placement]="'top'" [outsideClick]="false" [bsConfig]="{  showWeekNumbers:false,containerClass: 'theme-dark-blue',rangeInputFormat: 'DD/MM/YYYY' }"
          formControlName="Period">
        <span class="glyphicon glyphicon-calendar glyicon" (click)="dp.toggle()" [attr.aria-expanded]="dp.isOpen"
          value="Toggle" style="top:36px"></span>
        <div class="alert  alert-danger" *ngIf="formGroup.get('Period').dirty && formGroup.get('Period').errors && formGroup.get('Period').errors.ageRange ">
          Date range selected is invalid
        </div>
      </div>

我正在 Angular 6 中为我的公司构建一个媒体上传器，并在 s3 中将文件加载到我们的存储桶中。到目前为止，文件已成功上传并显示在 s3 控制台中，但 POST 请求始终返回“null”，即使它有效。

我想取回响应数据，因为我正在尝试跟踪上传进度，以在 UI 中显示用户。但是我无法从空响应中获取任何事件。

这是当前工作代码的样子。当我添加一个 console.log 并检查响应时它是“空”。我做错了什么，还是 s3 是这里的问题？

upload(url: string, data: any) {
  const options = { reportProgress: true };

  return this.http.post(url, data, options)
    .map((response: Response) => response);
}

我正在尝试将数组绑定到列表中。绑定部分工作正常。但未显示下拉的默认值。最初数组没有任何值。

代码

<select (change)="select($event)" [(ngModel)]="drp_selectedValue" >
                    <option value ="">Select.....</option>
                    <option *ngFor="let list of dataList?.length > 0 " (click)="select(list)" [ngValue]="list">{{list.name}}</option>

                </select>

目前我的列表显示如下

我还尝试检查 dataList 长度并放置 value="" ，但不起作用。我的代码有什么问题？

我在 angular 6 应用程序中使用 HttpClient 来加载数据。成功加载数据后，我需要做一些额外的工作。如果我使用 subscribe 功能，我可以很容易地在 subscribe 中做到这一点，例如：

http.get("/addressOfService").subscribe(data=>{
   this.info =data;
   DoJob();
});

但我知道加载数据并在视图中使用它的最佳实践是尽可能长时间地使用异步管道，所以我正在使用它。现在我的问题是在加载数据并且用户使用异步管道时运行函数的最佳实践是什么。我尝试了一些不同的解决方案，发现我可以使用 map 函数，例如：

http.get("/addressOfService").pipe(map(data=>{
   DoJob();
   return data;
}));

但我不确定这是否是一个好习惯。

{
    "Search": [
        {
            "name": "akram",
            "roll": 101
        },
        {
            "name": "wasim",
            "roll": 102
        }
    ],
    "total": "two record"
}

我想这样打印：

akram 101
wasim 102