小编Ant*_*Day的帖子

Angular2 - 表达式在检查后发生了变化 - 使用resize事件绑定到div宽度

我已经对这个错误进行了一些阅读和调查,但不确定我的情况的正确答案是什么.我知道在开发模式下,更改检测运行两次,但我不愿意enableProdMode()用来掩盖问题.

下面是一个简单的示例,其中表格中的单元格数量应随着div的宽度扩展而增加.(请注意,div的宽度不仅仅是屏幕宽度的函数,因此不能轻易应用@Media)

我的HTML看起来如下(widget.template.html):

<div #widgetParentDiv class="Content">
<p>Sample widget</p>
<table><tr>
   <td>Value1</td>
   <td *ngIf="widgetParentDiv.clientWidth>350">Value2</td>
   <td *ngIf="widgetParentDiv.clientWidth>700">Value3</td>
</tr></table>
Run Code Online (Sandbox Code Playgroud)

这本身没有任何作用.我猜这是因为没有任何因素导致发生变化检测.但是,当我将第一行更改为以下内容并创建一个空函数来接收调用时,它开始工作,但偶尔我得到'表达式在检查后已更改错误'

<div #widgetParentDiv class="Content">
   gets replaced with
      <div #widgetParentDiv (window:resize)=parentResize(10) class="Content">
Run Code Online (Sandbox Code Playgroud)

我最好的猜测是,通过这种修改,触发更改检测并且一切都开始响应,但是,当宽度快速变化时抛出异常,因为前一次更改检测迭代需要更长的时间来完成,而不是更改div的宽度.

  1. 有没有更好的方法来触发变化检测?
  2. 我是否应该通过函数捕获resize事件以确保发生更改检测?
  3. 使用#widthParentDiv来访问可接受的div的宽度?
  4. 有更好的整体解决方案吗?

有关我的项目的更多详细信息,请参阅类似问题.

谢谢

javascript responsive-design angular2-changedetection angular

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

Angular2 - 多个依赖的顺序http api调用

我正在构建一个Angular2应用程序,其中一个组件需要进行多个API调用,这些调用依赖于之前的API调用.

我目前有一个服务,它进行API调用以获取电视节目列表.对于每个节目,我需要多次调用不同的API来逐步完成结构,以确定节目是否存在于Plex服务器上.

API文档在这里

对于每个节目,我需要进行以下调用并获取正确的数据以确定它是否存在:(假设我们有变量<TVShow>, <Season>, <Episode>)

http://baseURL/library/sections/?X-Plex-Token=xyz 会告诉我: title="TV Shows" key="2"

http://baseURL/library/sections/2/all?X-Plex-Token=xyz&title=<TVShow> 会告诉我: key="/library/metadata/2622/children"

http://baseURL/library/metadata/2622/children?X-Plex-Token=xyz 会告诉我: index="<Season>" key="/library/metadata/14365/children"

http://baseURL/library/metadata/14365/children?X-Plex-Token=xyz会告诉我:index="<Episode>"这意味着我的插曲存在.

响应是在json中,我删除了很多多余的文本.在每个阶段,我需要检查正确的字段是否存在(<TVShow>, <Season>, <Episode>),以便它们可以用于下一次调用.如果没有,我需要返回该节目不存在.如果是的话,我可能想要为节目返回一个id.


我看了很多例子,包括promise,async和flatmap,但我不知道如何根据我见过的其他例子解决这个问题.


这是我获取节目列表的方法.(shows.service.ts)

export class ShowsHttpService {
    getShows(): Observable<Show[]> {
        let shows$ = this._http
            .get(this._showHistoryUrl)
            .map(mapShows)
            .catch(this.handleError);
        return shows$;
    }
}

function mapShows(response:Response): Show[] {
    return response.json().data.map(toShow);
}

function toShow(r:any): Show { …
Run Code Online (Sandbox Code Playgroud)

api service http observable angular

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