小编Ras*_*sta的帖子

如何初始化 ElementRef Angular - Typescript

当我使用

@ViewChild('serachField', { static: false }) serachField: ElementRef<HTMLInputElement>

我收到错误

Property 'serachField' has no initializer and is not definitely assigned in the constructor.
Run Code Online (Sandbox Code Playgroud)

我通常初始化变量,但我不确定在这种情况下该怎么做

我试过了

@ViewChild('serachField', { static: false }) serachField: ElementRef<HTMLInputElement> = new ElementRef<HTMLInputElement>(--unsure what the parameter should be--)
Run Code Online (Sandbox Code Playgroud)

我得到:

Expected 1 arguments, but got 0.ts(2554)
core.d.ts(2253, 17): An argument for 'nativeElement' was not provided.
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular

16
推荐指数
1
解决办法
1万
查看次数

Angular 4 填充表单并设置为未触及

创建了一个更新表单,其中基本上填充了信息。

我想要的是禁用该按钮,直到表单中的信息发生更改

表单组正在使用 valuechanges 来监听信息何时被编辑

但即使我改变使用,形式总是被触及

this.formGroup.markAsUntouched()
Run Code Online (Sandbox Code Playgroud)

表单本身确实记录了我已将其设置为未触及的事实

setFormValues(){
      this.firstNameControl.setValue(user.firstName);
      this.lastNameControl.setValue(user.lastName);
      this.emailControl.setValue(user.email);
      this.userNameControl.setValue(user.userName);
      this.emailControl.setValue(user.email);
  //Tried setting here this.formGroup.markAsUntouched()
}

onFormChanges() {
    return this.formGroup.valueChanges
    .subscribe(val => {
        //Can set here but will always be untouched, as well if I use 
       this.formGroup.markAsUntouched()
        console.log(this.count, this.formGroup.valid, this.formGroup.touched, this.formGroup.dirty)

    });
  }
Run Code Online (Sandbox Code Playgroud)

我知道上面的内容将始终保持不变,但如果我省略它,它会在 init 上执行两次并将表单设置为触摸,因为,我想,来自数据库的信息已加载,已尝试使用计数器 var; 如果 valuechanges 的 counter == 2 (第二次迭代)则 this.formGroup.markAsUntouched()

哪个有效,另一件事是 html 似乎没有注册表单组被禁用

<button class="btn btn-primary btn-complimentary" type="submit" [disabled]="!formGroup.touched">
Run Code Online (Sandbox Code Playgroud)

angular angular-forms

6
推荐指数
2
解决办法
2万
查看次数

Nodejs表达,Heroku CORS

我的应用程序的服务器端是使用Node with express构建的,

它本地工作正常,但现在我已经上传到Heroku

我收到了CORS错误,即使我已经在应用程序中处理了它

index.js

var express = require('express');
var bodyParser = require('body-parser');

var http = require('http');
var path = require('path');
var twit = require('twitter');
var app = express();
var port = process.env.PORT || 3000;

var twitter = new twit({
  consumer_key:  'myKey',
  consumer_secret: 'mySecret',
  access_token_key: 'myKey',
  access_token_secret: 'mySecret'
});
app.set('port', (port));
var server = http.createServer(app).listen(port, function() {
  console.log('Server listening on port ' + port);
});
app.use(bodyParser.urlencoded({extended: true}));

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); …
Run Code Online (Sandbox Code Playgroud)

heroku node.js express angular

5
推荐指数
3
解决办法
8055
查看次数

Angular 5材料小吃吧

我遇到的问题是,snackbar组件在初始化时附加在cdk-global-overlay-wrapper之外(在cdk-overlay-container中)

这使得它在屏幕中间瞬间可见

它然后消失并重新附加在cdk-global-overlay-wrapper中并从底部滚动它应该.

任何想法如何改变这个?

javascript css angular-material2 angular

3
推荐指数
1
解决办法
2362
查看次数

ngrx 订阅的商店不会在状态更改时更新 Angular5

我正在构建一个应用程序,该应用程序将城市名称发送到 api 端点并返回该城市的天气。

它使用两个操作,一个更新城市,使用名称作为有效负载,操作二加载返回的新数组以更新状态

效果使用switchMap映射api调用然后返回结果。

用于显示商店结果的 select 函数仅在页面加载(空数组)和第一组结果时检测商店更新

并且在之后没有检测到我商店内的变化

页面显示数组中的第一个对象,但状态中有 3 个对象。

在此处输入图片说明

应用状态:

import { Cities } from '../../model/weather';

//Holds data for city weather
export interface AppState {
  readonly cityWeather: Cities[];
}
Run Code Online (Sandbox Code Playgroud)

在 app.module 中:

import {cityWeather} from './weather/store/reducers/weather';

    export const reducers = {
        cityWeather
     };

 StoreModule.forRoot(reducers, {initialState: undefined})
Run Code Online (Sandbox Code Playgroud)

减速机:

export function cityWeather(state:Cities[] = [], action:Action) : any {
    switch (action.type)  {
        case LOAD_CITIES_ACTION:
        return  handleLoadCitiesAction(state, action);
        case UPDATE_CITIES_ACTION:
        console.log(state)
        return handleUpdateCitiesAction(state, action);
    default:
        return state;
    }

}
function  handleUpdateCitiesAction(state, …
Run Code Online (Sandbox Code Playgroud)

ngrx angular

3
推荐指数
1
解决办法
9071
查看次数

断开 Socket.io 房间中所有用户的连接

当管理员希望时,我一直试图断开所有用户与房间的连接。我可以从房间获取套接字 ID,但在尝试断开连接或离开房间时出现错误

这是我的连接方式:

 var io = require('socket.io'),
    http = require('http'),
    server = http.createServer(),
    io = io.listen(server);

    io.sockets.on('connection', function(socket){
      //socket.join('groupname');
      console.log('User connected');

      socket.on('disconnect', () => {
        console.log('User disconnected...');

      })

//This is how the room is connected to
  socket.on('group', function(groupname) {
         socket.join(groupname);
     });

    socket.on('completed', function(groupname) {
         var users = io.nsps["/"].adapter.rooms[groupname]
              console.log(users)
            for(var i = 0; i < users.length; i++){
               console.log(users[i])///undefined
           }

      });

  })
Run Code Online (Sandbox Code Playgroud)

也试过

 socket.on('completed', function(groupname) {
       var users = io.nsps["/"].adapter.rooms[groupname]
        Object.keys(users.sockets).forEach( function(socketId){
              console.log(groupname+" client socket Id: " + socketId );
              socketId.disconnect(); …
Run Code Online (Sandbox Code Playgroud)

javascript socket.io

2
推荐指数
1
解决办法
1376
查看次数

forkjoin 没有返回结果

我正在使用 forkJoin 合并两个 firebase 请求的结果

两个请求均完成并记录在控制台中,但 forkJoin 本身的映射函数不会触发,因此不会向应用程序返回任何结果

public initGroup(groupname, username){
  console.log(groupname, username)//This logs
  return Observable.forkJoin([
      this.getGroup(groupname, username),
      this.groupMembers(username, groupname),
    ])
    .map((data)=>{
      console.log(data)//This does not log
      this.group = data;
      return this.group
    })
}
Run Code Online (Sandbox Code Playgroud)

对于各个功能:

public getGroup(groupname, username){
  return (this._af.database.object('/groups/'+groupname) as FirebaseObjectObservable<any>)
      .map((group)=>{
       console.log(group)//This logs
       return group
  })

}
 public groupMembers(username, groupname){
  return  this.afService.getUserItems(groupname)
  .map((users:UserInfo[])=>{
    console.log(users)//This logs
    return users
  })
}
Run Code Online (Sandbox Code Playgroud)

我在组件内订阅:

let conn = this.groupService.initGroup(groupname, username)
                  .subscribe((data)=>{
                  console.log(data)//Does not log
                  ......
                })
Run Code Online (Sandbox Code Playgroud)

types rxjs firebase angular google-cloud-firestore

2
推荐指数
1
解决办法
1040
查看次数

HttpErrorResponse:api url jasmine 测试的 Http 失败响应

我在测试 api 调用并返回错误时遇到困难

“ HttpErrorResponse:https: //server.herokuapp.com/twitter/gettweets的 Http 失败响应:0”

我可以让它返回正确的结果

我基本上是在应用程序中获取推文并显示

我正在测试的服务:

const TWITTER_KEY = makeStateKey('twitter');
@Injectable()
export class SocialService {
  private twitter:any;
  private url = 'https://server.herokuapp.com/';
  constructor(private http: HttpClient,
              @Inject(PLATFORM_ID) private platformId,
              private transferState:TransferState) { }

  initTwitter(){
    this.twitter = this.transferState.get(TWITTER_KEY, null as any);
    let data;
      if (this.twitter) {
        data = this.transferState.get(TWITTER_KEY, null);
        console.log("data= "+data);
            this.transferState.remove(TWITTER_KEY);

            return Observable.of(data);
            }else{
              const httpOptions = {
                headers: new HttpHeaders({
                 'Content-Type': 'application/json',
               })
             };
              return this.http.get(this.url+'twitter/gettweets', httpOptions)
                  .map((response) => {
                    let data = response; …
Run Code Online (Sandbox Code Playgroud)

unit-testing jasmine angular

2
推荐指数
1
解决办法
6207
查看次数

Angular2返回的Div高度不正确

我正在使用Angular2/4并尝试在组件加载时获取div的高度

<div id="top"  #divId>
</div>

@ViewChild('divId') myDiv: ElementRef;

ngOnInit() {
    console.log(this.myDiv.nativeElement.offsetHeight)
  }
Run Code Online (Sandbox Code Playgroud)

但是,当我在控制台中检查时,仅当div首次加载时返回的高度是不正确的

有什么指针吗?

javascript angular

1
推荐指数
1
解决办法
565
查看次数

模板变量始终未定义 ngOnChanges

我有一个子组件,在其父组件中使用了两次,它使用 ngOnChaages 来更新值;

这一切都工作得很好,但现在我正在尝试根据通过@Input变量传递给它的信息来操作子模板。

我发现的是;当父组件首次加载时,模板变量在函数调用中未定义

这是有道理的,因为该函数是在onChanges方法内调用的,并且没有给模板足够的时间来加载。

我需要重构我的代码,但是如何重构呢?

目前,如果我使用它就可以了setTimeout

所以简单来说:

@ViewChild('myContainer', {read: ElementRef}) myContainer: ElementRef;
@Input() myUpdatingVar

ngOnChanges(): void {
  if (this.myUpdatingVar === someValue) {
      this.myFunc(this.someValue1);
   } else {
      this.myFunc(this.someValue2);
   }
}

myFunc(param){
   do stuff....
   this.updateDom(anotherParam);
}

updateDom(param) {
// If I use setTimeout this works
this.myContainer.nativeElement.querySelector(`#someId`); // Undefined
}
Run Code Online (Sandbox Code Playgroud)

javascript angular-template lifecycle-hook angular

1
推荐指数
1
解决办法
5831
查看次数