小编Shr*_*air的帖子

在组件加载到angular4应用程序的下面组件中,我不断收到错误:

ng:///HeaderModule/HeaderComponent.ngfactory.js:334错误:没有带有未指定名称属性的表单控件的值访问器

我试过删除ngModel和value属性但没有任何工作.

我假设问题是标题.component.html.下面是html

                    <!-- Notification area-->
                    <li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle" (click)="changeNotificationStatus()">
                            <i class="glyphicon glyphicon-bell"></i>
                            <span class="visible-xs-inline">Notifications</span>
                            <span class="badge badge-sm up bg-danger pull-right-xs" [hidden]="notificationCount<=0" [(ngModel)]="notificationCount"></span>
                        </a>
                        <div class="dropdown-menu w-xl animated fadeInUp">

不确定导致问题的原因.如果有人可以指出这个问题会有所帮助.

谢谢

我必须检查列表中的元素是否在视口内.为此我使用angular2插件angular-inviewport.

插件的作用是,一旦卡片在窗口底部,它就会返回true.我希望在注册印象之前,卡片应位于窗口中央或至少稍微接近窗口顶部.为此,我需要当前元素的引用,并将其与窗口高度和Yoffset进行比较,如下所示(最后一个解决方案).

下面是我的代码中的一小段代码和我的回调.

    <li class="" *ngFor="let data of dataArray; let i=index;">
         <div id="data{{data.Id}}" snInViewport (inViewportChange)="handlerFunction($event,data)" class="card m-b-" style="height:auto;">
        </div>
   </li>

甚至尝试添加动态参考

<div #data_{{data.Id}} id="data{{data.Id}}" snInViewport (inViewportChange)="handlerFunction($event,data)" class="card m-b-" style="height:auto;">

不确定这是否正确.

在handlerFunction里面我也想要div引用.

我怎样才能做到这一点.欢迎任何建议,方法或指导!

谢谢

我正在构建一个 chrome 扩展并面临与 csp 相关的问题。我正在使用清单 V3

下面是我的csp

 "content_security_policy": { 
      "extension_pages": "script-src 'self' 'unsafe-inline' 'https://cdn.jsdelivr.net/'; object-src 'self'"
    }

我在代码中使用 alpine.js 并想运行它。它在 v2 中运行，但我无法让它在清单 v3 中工作。

谢谢

我创建了一个带有角度材料的角度4应用示例.我正试图将卡片放在视图中心.但它不起作用.Below是代码

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<router-outlet></router-outlet>

login.component.html

<div  ng-cloak=""  layout-fill layout="column" style="background:green" layout-align="center">
    <div flex="50" layout="row" layout-align="center">
      <md-card flex="50"></md-card>
    </div>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { MdCardModule,MdInputModule } from '@angular/material';

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

  constructor() { }

  ngOnInit() {
  }

}

在我的angular4应用程序中,我正在尝试将视频上传到服务器.但无论我添加到内容类型,它总是会导致服务器出错.在角度1中,使用{'Content-Type'命中相同的api :undefined}

我尝试了相同的角度,但它工作.数据和一切都是正确的.我试过内容类型设置如下

headers.append('Content-Type', 'multipart/form-data');
headers.append('Authorization', token);
headers.set('Accept', 'application/json');

以及如下

headers.append('Content-Type',undefined);

以下是http请求方法:

public uploadVideo(formData: any) {


        var Upload = this.baseUrl + this.ngAuth.getApiUrl('Upload');
        var authData = JSON.parse(this.localStorage.localStorageGet('token'));
        var token = 'Bearer ' + authData.token;
        var self = this;

        var headers = new Headers();
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Authorization', token);
        headers.set('Accept', 'application/json');

        return this.http.post(Upload , formData, { headers: headers, method: 'POST' })
            .map((res: Response) => res.json());

    }

请指导!谢谢

我试图在我的角度5.0.2项目中包含hello.js.

以下是cli版本

我已将脚本文件添加到angular-cli.json文件中.

"scripts": [
        "./js/hello.js",
        "./js/hello.polyfill.js",
       ]

路径是正确的,因为我也在angular-cli.json中加载样式,它们正在加载正常.

在我的服务文件中,我导入hello如下:

declare var hello: any;
declare var gapi: any;

但是当我运行ng build时,控制台显示错误:

找不到模块'hello'.

如果我通过index.html中的脚本标记加载文件,代码和导入工作正常.只有当我将它添加到angular-cli.json文件时,它才会停止工作.

请指导谢谢

我正在尝试了解angular 4中的继承。

以下是我的AppComponent文件：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app';
  myArray= ["1","2","3"]; //THIS WORKS
  //myArray:any; //Declared but not initialized

  setTitle(value:any){
    this.title=value;
    console.log(this.myArray[2]);

  }
  ngOnInit(){
    //this.myArray=["1","2","3"]; //THIS DOESNT WORK

  }
}

这是扩展AppComponent的另一个组件

import { Component, blurbs } from '@angular/core';
import { AppComponent } from '../app.component';

@Component({
  selector: 'app-child',
  templateUrl: `<p>
  title {{title}}
  <button (click)="setTitle('child')">change title</button>
</p>`,
  styleUrls: ['./child.component.css']
})

export class ChildComponent extends AppComponent implements OnInit …

我在表单中使用 maxlength 但它抛出错误

错误类型错误：无法读取 null 的属性“maxlength”

我使用 maxlength 的部分表单：

<div>
   <textarea AutoExpandTextArea [inputData]='model.title' maxlength="100" class="videoTitle" name="videoTitle" id="videoTitle" #videoTitle="ngModel"  placeholder="Title" [(ngModel)]="model.title" required>{{model.title}}</textarea>
  <span class="text-danger" *ngIf="submitted && loginform.form.invalid && videoTitle.errors.required">Title is mandatory</span>
  <span class="text-danger" *ngIf="videoTitle.dirty && videoTitle?.errors.maxlength">Maximum 100 characters are allowed</span>
   <textarea AutoExpandTextArea [inputData]='model.description' maxlength="120" class="videoDescription" id="videoDescription" name="videoDescription" #videoDescription="ngModel" placeholder="Description" [(ngModel)]="model.description">{{model.description}}</textarea>
   <span class="text-danger" *ngIf="videoDescription.dirty && videoDescription?.errors.maxlength">Maximum 120 characters are allowed</span>

</div>

页面加载时模型对象如下所示

this.model = {
            description: '',
            title: '',
        }

一旦我在文本区域中输入一些内容，错误就会开始出现。

我有一个指令也绑定到文本区域。不确定这是否导致问题。

我正在学习 alpine.js 并尝试捕获用户输入值。我使用了“x-on:input”，但它没有调用该函数

下面是简单的表单输入

 <input type="email" class="form-control" x-on:input.debounce="validateEmail($event)" x-model="userEmail" id="email" aria-describedby="emailHelp" placeholder="Enter email">

这是我的index.js 中的基本方法

function validateEmail(event){
console.log(userEmail);

}

该函数没有被调用。

添加示例stackblitz

请指导

谢谢施鲁蒂·奈尔

我无法解析提取调用中的数据

下面是方法

onLoginPress=()=>{
      console.log("username="+this.state.username);
      console.log("password="+this.state.password);
      this.sendLoginRequest(this.state.username,this.state.password)
      .then((response) => {
          console.log("RESPONSEEEEEEEEEEEEEEEE");
          console.log(response.text())
          console.log( Promise.resolve(response));
          response.json();
      })
      .then((responseJson) => {

        console.log(responseJson);
      })
      .catch((error) => {
        console.error(error);
      });


    };

我得到的回应是一个承诺，我无法摆脱它的代币。

以下是response.text（）的日志

{_45：0，_81：1，_65：““ 3h8112qe2qobox3675ghmq9dtcbjvddc”'，_ 54：空}

对于console.log（Promise.resolve（response））的输出是

{ 
_45: 0,
_81: 1,
_65: { type: 'default',
  status: 200,
  ok: true,
  statusText: undefined,
headers: { map: { connection: [ 'Keep-Alive' ],
'content-length': [ '34' ],
'content-type': [ 'application/json; charset=utf-8' ],
'set-cookie': [ 'persistent_shopping_cart=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; Max-Age=0; path=/' ],
'cache-control': [ 'no-store, no-cache, must-revalidate' ], …

在我的应用程序中，我将 YouTube 视频加载到 iframe 中。我已经清理了网址。但是当我运行应用程序时，src 属性不会加载。

下面是html：

<a [href]="data.url" target="_blank" *ngIf="data.contentTypeString=='YOUTUBE_VIDEO' && data.url != null">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe *ngIf="data.contentTypeString=='YOUTUBE_VIDEO'" 
                        class="embed-responsive-item" 
                        src="{{data.url}}"></iframe>
            </div>
        </a>

下面是我运行相同内容时的屏幕截图：

src 只是不会加载我尝试过的 [src]=data.url。

以下是我用来清理网址的方法：

public manageYoutubeUrl(url: any) {
        console.log("url====" + url);
        var youtubeUrl = this.sanitize.bypassSecurityTrustUrl(url.replace('watch?v=', 'embed/').replace('http://', 'https://')+"?wmode=opaque&rel=0&autohide=1&showinfo=0&wmode=transparent");
        console.log("youtubeUrl=====" + youtubeUrl);
        return youtubeUrl;
    }

当我检查 youtubeURL 日志时，它是这样的：

youtubeUrl=====SafeValue 必须使用 [property]=绑定： https://www.youtube.com/embed/l-103taCWOQ ?wmode=opaque&rel=0&autohide=1&showinfo=0&wmode= transparent （请参阅http://g. co/ng/security#xss )

错误错误：需要安全的 ResourceURL，在 DomSanitizerImpl.checkNotSafeValue 处获取了 URL（请参阅 http://g.co/ng/security#xss）（

请指导。谢谢。

我有一个存储一些数据的模型.我在我的服务中创建了一个该模型的数组.就像这样

modelArray: MyModel[];

但是当我尝试将一些数据推送到数组时,它会因错误而失败

无法读取未定义的属性推送

this.modelArray.push(currentData);//THE PROBLEM CODE

我不确定这样做的正确方法.

我的服务代码如下所示:

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';

import { NgAuthService } from '../shared-service/service/ng-auth.service';
import { AppLocalStorageService } from '../shared-service/service/app-local-storage.service';
import { MyModel } from './model/my-model';
@Injectable()
export class ModelService {
    authObj: any;
    appConstants: any;
    baseUrl: any;
    count: any;
    modelArray: MyModel[];

    constructor(private http: Http, public ngAuth: NgAuthService, public localStorage: AppLocalStorageService) {
        this.authObj = this.ngAuth.getNgAuth();
        this.appConstants = this.ngAuth.getAppConstant();
        this.baseUrl = this.authObj.apiServiceBaseUri;
    }
    /*Get …