小编Jos*_*eph的帖子

如何从Angular 4中的select选项中获取值？

我想将它分配给component.ts文件中的新变量.我试过这个,但没有输出.

你也可以用[(ngModel)]吗？

component.html

<form class="form-inline" (ngSubmit)="HelloCorp(f)" #f="ngForm">
     <div class="select">
         <select class="form-control col-lg-8" #corporation required>
             <option *ngFor="let corporation of corporations" [value]="corporationObj">{{corporation.corp_name}}</option>    
         </select>
             <button type="submit" class="btn btn-primary manage">Submit</button>
     </div>
</form>

component.ts

HelloCorp() {
const corporationObj = corporation.value;
}

为什么我不能在使用bootstrap 4在角度4中调整大小到移动屏幕时切换导航栏.我将它包含在脚本和样式的角度cli中,来自bootstrap的节点模块.我的代码中是否缺少某些内容？请检查下面.有什么不对？请帮忙

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Dashboard</a>
  <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

.angular-cli.json

 "styles": …

我遇到问题，导致 ESLINT 在控制台中输出错误。我想解决控制台中的问题。请在此处检查代码和框

点击这里

更新问题

The 'callbackFunction' function makes the dependencies of useEffect Hook (at line 33) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'callbackFunction' in its own useCallback() Hook. (react-hooks/exhaustive-deps)

老问题

The ref value 'containerRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'containerRef.current' to a variable inside the effect, and use that variable in the …

如何通过使用访问主题的颜色sx？我在下面尝试过，但它不起作用。

<Card
  sx={{
    border: "2px solid primary.main",
  }}
>

我需要帮助处理我的角度应用程序中的过期令牌.我的api有过期的时间但我的问题是当我忘记退出我的角度应用程序,一段时间后,我仍然可以访问主页但没有数据.我能做些什么吗？是否有可以处理此问题的库？或者有什么我可以安装？更好,如果我没有安装任何东西.这是我的身份验证码？我可以添加任何可以处理过期的内容吗？如果过期,我将无法访问该主页.

auth.service.ts

 export class AuthService {
  private loggedIn = false;

  constructor(private httpClient: HttpClient) {
  }

  signinUser(email: string, password: string) {  
    const headers = new HttpHeaders() 
    .set('Content-Type', 'application/json');

    return this.httpClient
    .post(
      'http://sample.com/login', 
       JSON.stringify({ email, password }), 
       { headers: headers }
    )
    .map(
        (response: any) => {
          localStorage.setItem('auth_token', response.token);
          this.loggedIn = true;
          return response;
        });
   }

    isLoggedIn() {
      if (localStorage.getItem('auth_token')) {
        return this.loggedIn = true;
      }
    }

   logout() {
     localStorage.removeItem('auth_token');
     this.loggedIn = false;
    }
}

authguard.ts

@Injectable()
export class AuthGuard implements CanActivate …

如何使用角度4中的反应形式使用触摸和有效属性.我已经在模板驱动的表单中使用,您可以将它<span class="text-muted" *ngIf="!fname.valid && fname.touched"> Please enter a valid first name</span>放在输入字段下面.我还了解到反应形式会更好,因为你必须在component.ts中编写逻辑.所以我希望它以反应形式实现,我坚持如何使用触摸和有效的属性.

HTML

<form [formGroup]="form" (ngSubmit)="onSignIn(form)">
    <div class="form-group">
        <input type="text" class="form-control" id="email" placeholder="Enter email" formControlName="email">
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="password" placeholder="Password" formControlName="password">
    </div><button class="btn btn-primary btn-block" type="submit" [disabled]="!form.valid">Sign In</button>
</form>

TS

 ngOnInit() {
    this.form = this.formBuilder.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, Validators.required],
    });
  }

  onSignIn(form: FormGroup){
    const email = form.value.email;
    const password = form.value.password;
    this.authService.loginUser(email, password)
    .subscribe(
      data => {
        this.router.navigate(['/settings']);
        alert("Login Successful");
        console.log(data);
      },
      error …

我很难确定我应该在核心模块和共享模块中“导入”和“导出”什么。例如，在我的共享模块中，我导入和导出了 CommonModule，而仅导出了 ReactiveFormsModule。在我的核心模块中，我仅导入模块并导出组件。我想知道我应该在核心和共享模块中“导入”和“导出”什么？我已经在 stackoverflow 和文档中阅读了其他示例，但我仍然感到困惑。请检查下面我的结构/代码。谢谢。

共享模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { ToggleFullscreenDirective } from './directives/toggle-fullscreen.directive';
import { ViewComponent } from './view/view.component';
import { ErrorsComponent } from './reusable-error-page/errors.component';

@NgModule({
  exports: [
    ToggleFullscreenDirective,
    ViewComponent,
    ErrorsComponent,
    CommonModule,
    ReactiveFormsModule
  ],
  imports: [
    CommonModule
  ],
  declarations: [
    ToggleFullscreenDirective,
    ViewComponent,
    ErrorsComponent
  ]
})
export class SharedModule { }

核心模块

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; …

我正在尝试自动调整大小textarea 以使其适合其中的内容，但是在单击 Enter 以继续下一行后，我遇到了口吃问题。我怎样才能解决这个问题？

这就是我想要做的，见下图。

有关 StackBlitz 示例，请参阅此链接

代码

this.form.valueChanges.subscribe(() => {
   const textarea = this.myDiv.nativeElement;
   textarea.addEventListener('keydown', function() {
       setTimeout(() => {
           this.style.cssText = 'height:auto; padding:0';
           this.style.cssText = 'height:' + this.scrollHeight + 'px';
       }, 0);
   });
});

我想提出两个条件，如果它isProduct或isBox为真，则product_id应该是必需的。我在下面执行了这段代码，但它不起作用

 product_id: yup.string().when(['isProduct', 'isBox'], {
    is: true,
    then: yup.string().required('Select product'),
  }),

我的问题是我需要用户确认是否要继续关闭或刷新页面。如果他按下No，它不会关闭也不会刷新页面。

请看一下我到目前为止的代码：

useEffect(() => {
    window.addEventListener("beforeunload", alertUser);
    return () => {
      window.removeEventListener("beforeunload", alertUser);
    };
  }, []);