小编Jea*_*hel的帖子

如何在其标签位于"*ngIf = true"时初始化组件?

更新:
GünterZöchbauer提供了一个非常可接受的答案,完美无缺(谢谢!).但是我仍然有一个问题要检查我所做的是否是获得我所寻求的结果的正确方法.上下文给出了上下文.
我对父视图上的自定义标记的期望是,当*ngIf条件为假时,组件根本不加载(或者可能大部分加载).是否正常,即使它不在DOM中(因为条件为假),它仍然被加载?有没有更好的方法将组件的模板(及其类的逻辑)嵌入到父组件的模板中?

原帖

我是Angular 2的新手,到目前为止,我在开发基于Spotify API的小型歌曲曲目元数据应用程序方面非常有趣.

TL; DR:如何仅在其对应的HTML标记(用selector属性定义@Component)时才初始化组件*ngIf="true"


但我当然面临困难!我有这个组件,TrackDetailComponent在模板中我想包括2个其他组件.单击按钮时,它将从一个内部组件切换到另一个内部组件.
这是模板的样子(注意我现在只开发了两个内部组件之一,所以我使用了占位符而不是第二个):

<div id="view">
    <tig-track-info *ngIf="childView == TrackDetailView.InfoView" [track]="track"></tig-track-info>
    <p *ngIf="childView == TrackDetailView.LyricsView">Here go the lyrics</p>
</div>
Run Code Online (Sandbox Code Playgroud)

如您所见,我的内部组件(命名TrackInfoComponent)有一个输入参数.以下是该组件的摘录:

@Component({
    selector: "tig-track-info",
    templateUrl: "app/components/track-info/track-info.component.html",
    styleUrls: ["app/components/track-info/track-info.component.css",
                "app/shared/animations.css"]
})
export class TrackInfoComponent implements OnInit {
    private _trackId: string = null;
    @Input() 
    track: Track = null;
    previewAudio: any = null; // The Audio object is not yet defined in TypeScript
    albumArtworkLoaded: …
Run Code Online (Sandbox Code Playgroud)

angular2-directives angular2-template angular

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

使用MediaRecorder录制音频WebM时没有元数据

对于我的项目,我使用MediaRecorder录制用户音频,并且效果很好。当我希望使用Wavesurfer.js显示用户记录的波形时,我的问题浮出水面,它不会加载我的记录。但是,使用Audio元素播放录音效果很好。

在尝试了不同的来源之后,它似乎是因为最终的.webm文件没有太多的元数据,甚至没有持续时间或比特率(即使我在MediaRecorder选项中进行了设置)也是如此。这是ffprobe的输出,其中包含以下文件之一:

输入#0,matroska,webm,来自'206_3.webm':
元数据:
编码器:Chrome
持续时间:N / A,开始:0.000000,比特率:N / A
流#0:0(eng):音频:opus,48000 Hz ,mono,fltp(默认)

所以我的问题是:我在录制音频时做错了吗?这是我开始录制的方法:

// Somewhere in the code...
this._handleUserMedia(await navigator.mediaDevices.getUserMedia({ audio: true }));

// ... and elsewhere
_handleUserMedia(stream) {
    this._mediaRecorder = new MediaRecorder(stream, { audioBitsPerSecond : 64000 });

    this._mediaRecorder.ondataavailable = event => {
      this._mediaBuffer.push(event.data);
    };

    this._mediaRecorder.onstop = () => {
      // Ajoute le buffer et une URL vers le buffer dans les résultats pour la sauvegarde et le playback
      let blob = new Blob(this._mediaBuffer, { type: "audio/webm" });
      this.state.results[this.state.currentWordIdx].recordingBlob …
Run Code Online (Sandbox Code Playgroud)

javascript node.js web-audio-api wavesurfer.js

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

如何从material-ui 控制RadioGroup?

我有一个 React(打字稿)应用程序,我想在其中显示一个无线电组,但分成两列,如下所示: 在此输入图像描述

为此,我使用了两个@material-ui/core我希望完全控制的 RadioGroup,这样用户就无法在每个组中选择一个选项。我的问题是 RadioGroup 不关心value我给他们的,他们似乎在不受控制的模式下工作。我什至可以在 React DevTools 中看到他们的 props 中的值是 OK 的。

我是这样做的:

<div>Organizational attributes</div>
<div>
  <RadioGroup
    value={selectedPivotAttribute && selectedPivotAttribute.id.toString()}
    onChange={selectPivotAttribute}
  >
  {props.attributes.filter(attribute => attribute.isHierarchical).map(attribute => (
    <FormControlLabel
      label={attribute.name}
      key={attribute.id}
      value={attribute.id.toString()}
      control={<Radio/>}
    />
  ))}
  </RadioGroup>
</div>

<div>Secondary attributes</div>
<div>
  <RadioGroup
    value={selectedPivotAttribute && selectedPivotAttribute.id.toString()}
    onChange={selectPivotAttribute}
  >
  {props.attributes.filter(attribute => !attribute.isHierarchical).map(attribute => (
    <FormControlLabel
      label={attribute.name}
      key={attribute.id}
      value={attribute.id.toString()}
      control={<Radio/>}
    />
  ))}
  </RadioGroup>

</div>
Run Code Online (Sandbox Code Playgroud)

这两个 RadioGroup 已正确渲染并正常运行,它们还触发onChange处理程序,但它们不关心我赋予它们的值,它们只是过着自己的生活,因此它们并不相互排斥。

我试图在codesandbox 中重现,但我什至无法让一个RadioGroup 在那里工作。无论如何,这就是: https: //codesandbox.io/s/gallant-cloud-yixdd。在保持与案件相关的同时,我想不出比这更简单的事情了。

radio-group reactjs material-ui

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

在 TypeScript 中输入 &lt;svelte:component&gt; 的“this”属性

我正在 Svelte 中构建一种门户系统,使用商店传递组件以在组件树的某个位置显示。

我的问题不在于实施该系统,而在于键入商店。我试图这样声明:

const modalComponent = writable<SvelteComponent>(null)
Run Code Online (Sandbox Code Playgroud)

但这不起作用。当我在某处导入组件时,VS Code 向我显示了一种类型typeof <componentName>__SvelteComponent_,该SvelteComponent类型与该类型不兼容(实际上是 的别名SvelteComponentDev):

类型 'typeof <component>__SvelteComponent_' 缺少来自类型 'SvelteComponentDev' 的以下属性:$set、$on、$destroy、$capture_state 等。

我该怎么打这个字?我想避免使用any.

更新:这是一个可以重现该案例的代码沙盒。不幸的是,我似乎无法让它与 TypeScript 一起工作。我还在分享,希望能帮到你。

typescript svelte

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

SQLite3/PDO - 尽管确实存在,但没有这样的表

我有一个SQLite3数据库的问题,我可以使用sqlite3命令或PHPStorm内置数据库管理器访问它,但我正在处理的应用程序没有找到它中的表.它似乎正确连接到数据库.

这行PHP导致PDOException:

$query = "SELECT * FROM users";
$results = self::$app->db->query($query);
Run Code Online (Sandbox Code Playgroud)

简单就是例外SQLSTATE[HY000]: General error: 1 no such table: users.顺便说一句,我正在使用Slim框架.

我不知道该怎么做,因为我不熟悉Slim和SQLite.

谢谢您的帮助 :-)

php sqlite pdo

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

在 TypeScript 中键入 Redux 工具包的存储

我正在尝试开始在 React + TypeScript 中使用 Redux,所以我正在关注 Redux Toolkit 的教程并尝试在示例应用程序中实现它。

我在打字时遇到了很多关于 store 和mappStateToProps函数参数的困难。

我用切片配置了商店,如下所示:

import { configureStore } from '@reduxjs/toolkit'

import linksReducer from '../features/links/linksSlice'

const store = configureStore({
  reducer: {
    links: linksReducer,
  },
})

export default store
export type AppStore = typeof store
Run Code Online (Sandbox Code Playgroud)

我像这样连接了一个组件:

import React from 'react'
import { connect, ConnectedProps } from 'react-redux'

import { AppStore } from '../../features/appStore'
import { deleteLink } from '../../features/links/linksSlice'

import LinkCard from './LinkCard'
import Link from '../../models/Link'
import EmptyList from './EmptyList' …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs redux

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