小编bal*_*nav的帖子

我正在尝试在用户单击添加按钮时动态添加输入字段,并且对于每个表单字段必须有一个删除按钮,当用户单击表单字段必须删除时,我需要使用Angular 2来实现此目的,如我是Angular 2的新手,请帮我完成它

我试过了什么

我创建了一组字段(3个选择框和1个文本框),创建了一个名为添加字段的按钮,但我已经在角度1.x中尝试了它的工作正常但是在角度2我不知道如何完成它,这是我全部工作的 链接

app/app.component.ts
 import {
    Component
  }
from '@angular/core';
  @Component({
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <div class="container">
    <button class="btn btn-success bt-sm">add</button>
    <form role="form" calss="form-inline">
    <div class="form-group col-xs-3">
    <label>Select State:</label>
    <select class="form-control" [(ngModel)]="rules.State" id="sel1">
            <option>State1</option>
            <option>State2</option>
            <option>State3</option>
            <option>State4</option>
</select>
     </div>
    <div class="form-group col-xs-3">
<label>Rule:</label>
     <input type="text" data-toggle="modal" data-target="#myModal" class="form-                   control">
    </div>
<div class="form-group col-xs-3">
<label>Pass State :</label>
    <select class="form-control" [(ngModel)]="rules.pass">
    <option>State1</option>
    <option>State2</option>
    <option>State3</option>
    <option>State4</option>
</select>
 </div>
 <div class="form-group col-xs-3">
    <label>Fail State:</label>
        <select class="form-control" [(ngModel)]="rules.fail">
        <option>State1</option>
        <option>State2</option>
        <option>State3</option> …

抱歉，如果这是一个重复的问题，我在整个Web上搜索了解决方案，但找不到任何解决方案，因此将其发布，正在尝试从另一个组件内部的一个组件访问变量

我尝试过的

我创建了对象类型的模型，并在组件A的方法中设置了值，并尝试从组件B访问该模型对象，以便可以为组件B的元素设置值，但将对象设为未定义

问题

组件A首先在浏览器中加载，在其中单击表行时它包含一个表，将行数据作为对象并将该对象设置为包含相似结构对象的模型，我可以在Component中获取对象值，而我尝试从组件B调用模型，以便可以访问对象值。但是获取的对象值是未定义的，这是由于组件B是在组件A模板内部调用的模态。

成分A

 public rowSelected:boolean = true;
 constructor(public users : User ) {}
  getRowData(rowIndex: number, rowData: any): void { 
        this.rowSelected = $(rowIndex).hasClass('selected');
        console.log(rowData);
        this.users= rowData.FirstName;
        console.log(this.users); // can able to get the object value
    }

组件A模板

<div bsModal #editUserModal="bs-modal" class="modal fade" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" aria-label="Close" type="button" (click)="editUserModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title"><b>Edit User</b></h5>
            </div>
            <div class="modal-body">
                <componenetB #edituserDiv></componenetB>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary btn-sm  confirm-btn gap0" type="button" (click)="edituserDiv.EditUserSubmit()">Submit</button> …

我正在开发一个角度应用程序，当我运行“ng test”命令时，它显示一些错误并显示“已断开连接（0 次），因为 30000 毫秒内没有消息”。'。我尝试更新 karma、jasmine 软件包并执行“npm install”，但仍然没有任何帮助。这里是依赖包和karma.conf.js文件。我在这里错过了什么吗？需要什么套餐升级吗？

"devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/animations": "^5.0.0",
    "@angular/cli": "~7.3.2",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.4.2",
    "husky": "^0.13.4",
    "jasmine-core": "^2.5.2",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2",
    "typescript-formatter": "^7.2.2",
    "webpack": "^4.9.2"
  },



module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false …

我刚刚将我的 Web 应用程序项目从 angular 4 更新到了 angular 7，我在页面加载时遇到了动画触发器问题（ngOnInIt 方法）。我需要支持在 angular 4 和 angular 7 中流行的动画效果

我已将触发器添加到我的 app.module.ts 但我仍然无法解决错误

角 4

import {animateFactory } from 'ack-angular-fx'

.ts 文件

@Component({
   selector: 'abc',
   templateUrl: './abc.component.html',
   styleUrls: ['./abc.component.css'],
   animations: [animateFactory(480, 200, 'ease-in', 100, 'animate')]
})

.html 文件

<div [@animate]="'zoomIn'">
</div>

角 7

.ts

import { trigger, transition, useAnimation } from '@angular/animations';
import { bounce, zoomIn } from 'ngx-animate';

@component({
  animations: [
        trigger('bounce', [transition('* => *', useAnimation(zoomIn))])
    ],
})

.html

<div [@animate]="'zoomIn'"></div>

我得到的实际错误消息是

Error: The …

我在 android 中创建一个文档扫描应用程序，在我的项目中使用 OpenCV 和 Scan 库进行裁剪，我在相机视图中使用 drawrect 创建了一个矩形，现在我只需要捕获该矩形部分内的图像并将其显示在另一个活动中.

有问题的图像：

我正在Angular 2中创建一个表组件,我在其中创建一个公共表搜索过滤器管道,它正常工作,但没有在适当的列中显示值.当我开始在文本框中键入搜索键时,过滤后的值会正确显示,但不会显示在相应的列下.很抱歉,如果这个问题是重复的,我已经花了足够的时间搜索网页,但我无法得到解决方案.

以下是供您参考的代码

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public tableData: any = [
     {"Name":"Gaurav","Address":"Chennai","Contact":"9632587410"},
     {"Name":"Rakesh","Address":"Goa","Contact":"852397410"}
  ];
}

Pipe.ts

@Pipe({
  name: 'searchPipe'
})
export class searchPipe implements PipeTransform {
   transform(value: any, args: string[]): any {
      let filter = args[0];

      if (filter && Array.isArray(value)) {
         let filterKeys = Object.keys(filter);
         return value.filter(item =>
            filterKeys.reduce((key, keyName) =>
               key && item[keyName].toUpperCase() === filter[keyName].toUpperCase(), true));
      } else {
         return value;
      }
   } …